點擊菜單切換更改菜單登錄

的菜單按鈕的點擊，我想登錄的文字來代替它

<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

點擊菜單切換更改菜單登錄

回答

相關問題