單擊鏈接后按鈕更改功能

Question

我有一個基於列表的JavaScript導航按鈕。

一切正常，但是當單擊按鈕鏈接時，該功能中斷了...

有什么問題？？？ 任何幫助將是巨大的！ 謝謝。

 $(".FIRST").click(function(){ if($(this).hasClass('active')){ $(this).removeClass('active') } else { $(this).addClass('active') } }); $(".FIRST").click(function (evt) { if(evt.target.tagName != 'UL') return; $("li", this).toggle(); }); 

 ul li {list-style: none; border: 0; margin: 0; padding: 0; } a {text-decoration: none; color: white;} .FIRST { font-size:0px; width: 1px; height: 35px; background-color: green; border: solid 1px red; } .FIRST:hover {background-color: lightgreen;} .FIRST.active {background-color: yellow;} .SECOND { display: none; position: relative; top: 0px; width: 120px; height: 20px; border-radius:12px; background-color: green; line-height:30px; margin: 0 auto 6px 55px; font-size:12px; line-height: 1.8em; padding: 0 10px 0 20px; } .FIRST:hover {background-color: lightgreen;} .FIRST.active {background-color: yellow;} .SECOND:hover {background-color: lightgreen;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="FIRST" id="MAIN"> <li class="SECOND"> <a href="http://blank.org/" target="_blank"> LINK 1 </a> </li> <li class="SECOND"> <a href="http://blank.org/" target="_blank"> LINK 2 </a> </li> <li class="SECOND"> <a href="http://blank.org/" target="_blank"> LINK 3 </a> </li> <li class="SECOND"> <a href="http://blank.org/" target="_blank"> LINK 4 </a> </li> </ul> 

小提琴

謝謝

Answer 1

嘗試在第一個函數中添加判斷

$(".FIRST").click(function() {
    if (evt.target.tagName != 'UL')
    return;
    $(this).toggleClass('active');
});});

ps：我認為您應該將按鈕作為單獨的標簽

Answer 2

您的錨點位於<li>標記中，該標記也是<ul>的子類，因此屬於類'.FIRST'。

每當您單擊錨點鏈接時，您的父容器（即<ul>類別為.FIRST ）也會捕獲該事件。

在這種情況下，您的父容器是您的<ul> ，附加了單擊處理程序。 因此，當您單擊任意錨點時，它將觸發jquery toggle()函數，該函數將使用類.FIRST更改<ul>的顏色。

一個更簡單的方法是

使用div容器制作按鈕按鈕，並將點擊處理程序附加到該按鈕。 此單擊處理程序將導致div更改其顏色，並切換列表以顯示或隱藏。

SNIPPET在這里

 $(".FIRST").click(function(){ if($('#big_list').css('opacity')=='0'){ $('#big_list').css('opacity','1'); } else{ $('#big_list').css('opacity','0'); } if($(this).hasClass('active')){ $(this).removeClass('active') } else { $(this).addClass('active'); } }); 

 ul li {list-style: none; border: 0; margin: 0; padding: 0; } a {text-decoration: none; color: white;} .FIRST { vertical-align:top; display:inline-block; position:relatve; top:0; font-size:0px; width: 35px; height: 35px; background-color: green; border: solid 1px red; } #big_list{ display:inline-block; opacity:0; margin:auto; padding:0; } #container{ position:relative; top:0px; } .SECOND { width: 120px; height: 20px; border-radius:12px; background-color: green; margin: 0 auto 6px 0px; font-size:12px; padding: 0 10px 0 20px; } .FIRST.active {background-color: yellow;} .SECOND:hover {background-color: lightgreen;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> <div id='container'> <div class="FIRST" id="MAIN"> </div> <ul id='big_list'> <li class="SECOND"> <a href="http://blank.org/" target="_blank"> LINK 1 </a> </li> <li class="SECOND"> <a href="http://blank.org/" target="_blank"> LINK 2 </a> </li> <li class="SECOND"> <a href="http://blank.org/" target="_blank"> LINK 3 </a> </li> <li class="SECOND"> <a href="http://blank.org/" target="_blank"> LINK 4 </a> </li> </ul> </div>