点击菜单切换更改菜单登录

的菜单按钮的点击，我想登录的文字来代替它

<div class = "navbar navbar-inverse navbar-fixed-top"> 
    <div class = "container"> 
    <!--Collapse menu with three lines--> 
    <button type = "button" class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse"> 
     <span class = "icon-bar"></span> 
     <span class = "icon-bar"></span> 
     <span class = "icon-bar"></span> 
    </button> 

    <!--Actual menu--> 
    <div class ="collapse navbar-collapse navHeaderCollapse"> 
     <ul class = "nav navbar-nav navbar-right"> 
     <li class = "active"> 
      <a data-toggle = "collapse" data-target = ".navHeaderCollapse" href = "#">Home</a> 
     </li> 
     <li> 
     <a data-toggle = "collapse" data-target = ".navHeaderCollapse" href = "#">Blog</a> 
     </li> 
     <li> 
     <a data-toggle = "collapse" data-target = ".navHeaderCollapse" href = "#">About</a> 
     </li> 
     <li> 
     <a data-toggle = "collapse" data-target = ".navHeaderCollapse" href = "#contact">Contact</a> 
     </li> 
     </ul> 
    </div> 
</div> 
</div>

我添加了一个类这样

<div id="displaylogin" style="display:none;" > 

        <a href="#" class="menu-toggle">LOG IN <i class="fa fa-bars"></i></a>

，并试图显示隐藏这样使用JS。

$(function(){ 
    $('.menu-toggle').click(function(){ 
    $('.align-right').removeClass("visibleClass"); 
    $('.displaylogin').addClass("visibleClass"); 
}); 
});

Here's小提琴的相同。

来源

2015-10-29 Suraj

什么是不工作？你有什么尝试？你来到这里（网址）之前，你在哪里搜索解决方案？ - 另外，我建议为没有空格的标签编写属性，这样可以得到更简洁的代码，例如'

sample content

' – SidOfc

你可以将上面的代码添加到*问题*而不是放在*注释中*它看起来相当凌乱，因为你可以看到^。^ – SidOfc

在我看来，你试图绑定click处理程序到错误的元素。

从我所看到的，内div#displaylogin你有一个a元素与类menu-toggle但是由于div#displaylogin隐藏你永远不会点击它，因为它不是一个隐藏的元素中可见或可点击。

如果您希望您的代码首先触发，则必须将其绑定到button.navbar-toggle。

$('.navbar-toggle').on('click', function() { 
    // this line will not work provided the example code 
    // this is because this class is not in the example 
    // also this classname should not be used as a selector since you'll use it alot 
    // when you're using it all over the page jQuery will try to remove this class from every element with class 'align-right' 
    $('.align-right').removeClass('visibleClass') 
    // your element uses an ID, not a CLASS - therefore the '.' needs to be a '#' 
    $('.displaylogin').addClass('visibleClass') 
});

上面的例子试图指出了什么错误，但是我有一些额外的建议，使你的代码将无法在开发变成青蛙汤以后。

当你想将某些东西绑定到JS中的单个元素时，最好在页面上使用它们（应该是）唯一的ID。

这可以防止在您稍后在代码中进行更改时发生错误。

另外，使用类.align-right作为选择器响起，因为这个类有这样的通用命名，我假设你将在多个元素上重用它。

反过来，当你每次重复使用在不同的元素类，它会尝试删除具有class="align-right"的visibleClass从每元素。你能看到这会成为一个问题吗？

这一切都只是建议，所以不要采取了错误的方式，我们都试图互相帮助，在这里，这就是我想现在做:)

修复这些问题，相应地更新你的问题将使我们能够帮助你，直到你的问题得到解决。

理解选择器是一件非常简单的事情，当使用不当时会造成非常复杂的后果也很重要（正如这个案例）。

我真的不能说这是一个答案，但它是一个很大的评论，所以我只是想不断更新，当有更多的信息可用。

尝试调试你已经有我的意见，然后回来，如果你希望它来解决，好运在这个过程中编辑您的问题;）

来源

2015-10-29 12:08:55 SidOfc

点击菜单切换更改菜单登录

回答

相关问题