We Keep Coding

How can I remove a css portion when a button is clicked

I need to remove this css portion from a navbar-collapse when I click a button:
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
I tried something like this:
$("#toggleButton").click(function()
{
$(".navbar-collapse").remove("ul.nav","li.dropdown","ul.dropdown-menu");
});
But it doesn't work. I want to have a responsive navbar menu and when it collapse remove the dropdowns from that view.

Have you tried removeClass?
$(".navbar-collapse").removeClass("nav dropdown dropdown-menu");
If you want to remove the elements from the DOM
$(".nav, .dropdown, .dropdown-menu").remove();

You simply need to just set css attribute display to none on class .dropdown-menu applied to ul element.
ul.nav li.dropdown:hover doesn't have any relevancy here since they are used as an element locator and does not have display:none applied to them.
$("#toggleButton").click(function()
{
$('ul.dropdown-menu').css('display','none');
});
To remove the entire css attributes,
$("#toggleButton").click(function()
{
$('ul.dropdown-menu').removeAttr('style');
});

There's more than one way to accomplish this but you can do it by changing the css when you click the button
Here's how you would accomplish that:
$("#toggleButton").click(function()
{
$("ul.nav li.dropdown:hover > ul.dropdown-menu").css({"display": "none"});
});

Try this :
$("#toggleButton").click(function(){
$(".navbar-collapse").remove("ul.nav li.dropdown > ul.dropdown-menu");
});

Different style for the current link when I clicked

Can anybody help me with my code? I want to put different style of the current link, that I had selected. The hyperlinks do not go to different pages, they all refers to the current page.
here is my code:
HTML
<nav id="nav">
<ul>
<li class="current"><a href="#top" id="top-link" ><span>Home</span></a></li>
<li><span>Portfolio</span></li>
<li><span>About</span></li>
</ul>
</nav>
CSS
#nav ul li a:hover
{
color:#FFF;
background-color:#333;
}
#nav ul li a:active
{
color:#FFF;
background-color:#333;
}
FIDDLE DEMO HERE

you can change the .current class on click by using jquery code.
var links = $('#nav li');
links.click(function() {
$(this).parent().find(".current").removeClass('current');
$(this).addClass('current');
});
Check the DEMO.

First, here is the Fiddle Demo
I went with:
$('li').on('click', function(){
$(this).addClass('current')
.siblings().removeClass('current');
});

You can't do this with CSS only. You will need some Javascript to achieve that. (Apparently you can, see edit)
Even though your question isn't tagged jQuery and/or Javascript, here is an example of how to do that using jQuery:
Demo: http://jsfiddle.net/abhitalks/yW3Yt/1/
Relevant jQuery Code:
$("a").on("click", function() { // bind click event on all anchors
$("li").removeClass("current"); // remove current class from all list-items
$(this).parent().addClass("current"); // add current class to the parent of clicked anchor
});
Edit: Apparently, you could have a "CSS only" solution:
The idea is to use hidden radio buttons with corresponding labels. The radio inputs remain outside the anchors (because inputs are not valid contents for anchors), while labels are wrapped by the anchors.
Demo 2: http://jsfiddle.net/abhitalks/yW3Yt/4/
Relevant HTML:
<ul>
<li>
<input type="radio" name="opt" id="opt1"/>
<label for="opt1">Home</label>
...
Relevant CSS:
input[name="opt"] {
display: none;
}
input[name="opt"]:checked + a {
background-color: yellow;
}

javascript: add class to <a> which is clicked and remove all elements with specific tag

Okay so I have a navigation sidebar and I want it so that when a link is clicked, the .clicked class gets added to the link clicked and the .clicked class gets removed from all other tags, if other tags of a .clicked class. Here is my javascript
$('#sidebar ul a').click(function(){
$('#sidebar ul .clicked').removeClass('.clicked');
$(this).addClass('clicked');
});
here is my css
.clicked {
background: url(../images/liHover.png) no-repeat;
background-position: -5px 0px;
color: white;
}
and here is my html
<body>
<div id="sidebar">
<div id="sidebarHeader">
<h1>top</h1>
</div>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>
</div>
</body>
But it doesn't seem to work. When I click a link / < li > it does add the class however it does not remove the .clicked class from the other elements. Any idea why?

your html is invalid for starters, try putting the li first in the list
<li>First</li>
// repeat for other items
your jquery is also invalid, your missing the hashtag '#sidebar' to reference an id element
finally your jquery function removeClass doesn't need a period before the class removeClass('clicked');

First of all,
Is your code wrapped in
$(document).ready(function() {
});
or
$(function() {
});
If not, your code may be executing before the DOM is ready, in which case it will not bind properly.
Next,
$('sidebar ul a')
should be
$('#sidebar ul a')
and
$('sidebar ul .clicked').removeClass('.clicked');
should be
$('sidebar ul .clicked').removeClass('clicked');
On the CSS side of things, the background won't display on the link unless you set display: block and give it a width. Finally, the image URL inside the parentheses should be in quotes, and as the previous poster stated, the background position should be part of "background" since it's a shortcut.

may be because the a tag in inline
if you try out to put it like a block
#sidebarHeader{
display:block;
}
and you should remove the clicked from a element
like this
$('sidebar ul a').removeClass('.clicked');

How do i fix :hover on iPhone if there is no <a> element?

How do i fix :hover on iPhone if there is no <a> element?
I'm using a <li> element and the iPhone doesn't open my sub-menu when i tab it.
Example html:
<ul>
<li>Menu item (no <a> element)
<ul>
<li>Menu item<li>
</ul>
<li>
</ul>
I answered a JavaScript way to fix this, but i want to know if there are different ways to fix this (maybe a better one)

You can fix this by using JavaScript.
The following script will add hover as class to the <li> element:
<script type="text/javascript">
$("li").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
</script>
Just add li.hover where you got li:hover in your CSS like this:
This:
ul li:hover ul{
display:block;
}
Will be:
ul li:hover ul,
ul li.hover ul,{
display:block;
}
jQuery Documentation:
http://api.jquery.com/hover/
http://api.jquery.com/addClass/

Cause iPhone to respect hover states.
<ul>
<li onclick="//">test</li>
<li onclick="//">test</li>
<li onclick="//">test</li>
</ul>

I have found the best way to deal with div:hover to work on iphone. without using javascript
using a cursor: pointer make your element to act like anchor tag
css
ul li { cursor: pointer}
And you will also notice that when you click outside the pull down menu it doesnt close on iphone unless you click a real link. Since we can't see the cursor on mobiles this is the solution i made.
css
body { cursor: pointer }

Although iPhones/etc don't specifically have a hover state, the hover state of links is fired when users tap them. Generally double tap will actually follow the link.
Perhaps restructure your HTML so that you do have anchors with a hover state instead of only list items. No JS required.

add :focus and :active to your styles:
ul li ul{display:none}
ul li:focus ul,ul li:active ul{display:block}

http://blog.0100.tv/2010/05/fixing-the-hover-event-on-the-ipadiphoneipod/
//ipad and iphone fix
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
$(".menu li a").click(function(){
//we just need to attach a click event listener to provoke iPhone/iPod/iPad's hover event
//strange
});
}

Hide Div When Clicked

I've got a little HTML/CSS/JQuery drop down menu working. My pseudo code for it is:
function closeMenus() {
$('.subMenu').css('display', 'none');
}
#mainMenu ul li .subMenu {
display: none;
position: absolute;
}
#mainMenu ul li:hover .subMenu {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainMenu">
<ul>
<li>
Menu Header
<div class="subMenu" onClick="closeMenus();">Menu Content</div>
</li>
</ul>
</div>
The CSS works so when someone hovers over Menu Header, the subMenu appears below it and disappears when the mouse leaves the menu. My problem comes when a user clicks an item in the menu; I'd like to hide the menu. The JavaScript hides the menu fine but when the user mouses over the menu header again, it doesn't reappear. It appears that CSS won't override the JavaScript display property. Most, if not all, of the links won't be going to other pages, just calling more JavaScript.
Anyone have any ideas how to hide the sub menu on click so that it will be again visible, or do I need more Javascript to show the menu every time someone hovers?

Use JQuery more fully -- look into the .toggle() command and bind it via click:
$('.subMenu').click(function() {$(this).toggle();});
Then you can eliminate most of your other code.

You're trying to do half of it with CSS and half of it with jQuery. Just do it all with jQuery: http://jsfiddle.net/hw5qr/
$('.subMenu').click(function() {
$(this).hide();
});
$('#mainMenu').hover(function() {
$(this).find('.subMenu').show();
}, function() {
$(this).find('.subMenu').hide();
});

Stryle attribute has highest priority.
$('.ftpBrowseSubMenu').css('display','none');
make
<div style="display:none">
, so rule
#mainMenu ul li:hover
has lower priority against style attribute. So, you have to do everything with javascript.

Like you already said are element styles stronger than css styles (unless you use !important). So you have to to do everything with Javascript what shouldn't be to hard. You have just to register two more event listener: onmouseover and onmouseout. With them you can set the display property to the correct value and it will work this way.