Jquery - 爲什麼在選擇器上使用它不起作用？

你好，我嘗試使用jQuery與css下拉div。在我的頁面上，我有一個下拉菜單，並使用.click來切換類別。Jquery - 爲什麼在選擇器上使用它不起作用？

這是HTML和jQuery

<div class="service"> 
    <div class="service-btn"> 
     <h3>head</h3> 
    </div> 
    <div class="service-info"> 
     some text 
    </div> 
</div> 

$('.btn-service').click(function() { 
    $('.service-info', this).toggleClass('open'); 
});

出於某種原因，這是行不通的。即使在頁面上我使用

<li class="btn-dropdown"> 
    <ul class="nav-dropdown"> 
     <li><a href="#">list item</a></li> 
     <li><a href="#">list item</a></li> 
    </ul> 
</li> 

$('.btn-dropdown').click(function() { 
    $('.nav-dropdown', this).toggleClass('open'); 
});

並且這確實有效。當我說它有效時，我的意思是這個類被切換並添加到html標記中。

無法正常工作的人不會使用toggleClass添加/刪除類。根本沒有任何反應，並且jquery不會被點擊觸發。

代碼的jquery部分與類名的例外是一樣的，所以爲什麼服務代碼不像下拉代碼那樣工作。它是HTML嗎？

來源

2016-02-13 badsyntax

在第一個例子中沒有'.btn-dropdown'，因此jQuery無法綁定click事件處理程序。 –

調試專家提示：放入'console.log（ $（'.btn-dropdown'）。length）'會讓你知道那裏沒有匹配的選擇器。 –

sry，這實際上是一個錯字。第一個按鈕是.service-btn。即使這些課程相匹配，它也不起作用。 – badsyntax

像Felix Kling說的那樣沒有「.btn-dropdown」。

"<div class="service">" should be changed to "<div class="btn-dropdown"> 
    <div class="service-btn"> 
     <h3>head</h3> 
    </div> 
    <div class="service-info"> 
     some text 
    </div> 
</div> 

$('.btn-dropdown').click(function() { 
    $('.service-info', this).toggleClass('open'); 
});

「click」函數響應前面的選擇器元素。您也可以替換"$('.btn-dropdown').click" with "$('.service').click"它應該會返回類似的結果

來源

2016-02-13 06:39:28

對不起，我重新輸入代碼時弄亂了代碼。第一個按鈕實際上是.service-btn，它與切換中的類匹配。但它仍然不起作用。 – badsyntax

啊我明白了！ '點擊功能響應前面的選擇元素'。所以我想要的toggleClass元素必須是選擇器的子元素。 – badsyntax

我希望這段代碼能幫到你。

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    </head> 
    <body> 
     <div class="service"> 
      <div class="service-btn"> 
       <h3>head</h3> 
      </div> 
      <div class="service-info"> 
       some text 
      </div> 
     </div>   
     <li class="btn-dropdown"> 
      <div class="btn-dropdownLi"> 
       <h3>LI Toggle</h3> 
      </div> 
      <ul class="nav-dropdown"> 
       <li><a href="#">list item</a></li> 
       <li><a href="#">list item</a></li> 
      </ul> 
     </li>   
     <script> 
     $('.service-btn').click(function() { 
      $('.service-info').toggle(''); 
     });   
     $('.btn-dropdownLi').click(function() { 
      $('.nav-dropdown').toggle(''); 
     }); 
     </script> 
    </body> 
</html>

來源

2016-02-13 06:40:00

Jquery - 爲什麼在選擇器上使用它不起作用？

回答

相關問題