div中的兩個span元素均不可單擊

Question

我在div中有兩個span元素-

<div class="search-input">
  <div class="input-categories">
    <span class="comm-input-value">Any unit type </span>
    <span class="icon fa fa-angle-down"></span>
  </div>
</div>

我的jQuery代碼是-

$('.input-categories').on('click',function(){
        if ($(this).parent().hasClass("open")){
             $(this).parent().removeClass("open");    

        }else {
            $('.input-categories').parent().removeClass('open');
            $(this).parent().addClass('open');

        }
});

問題：只有帶有圖標的跨度是可單擊的。 我希望兩個跨度都可以單擊，而不僅僅是圖標跨度。 我該如何實現？ 請幫忙

Answer 1

做到這一點的一種優雅方法是使用jquery的toggleClass方法。

<div class="search-input">
  <div class="input-categories">
    <span class="comm-input-value">Any unit type </span>
    <span class="icon fa fa-angle-down"></span>
  </div>
</div>
<script>
$('.input-categories span').on('click',function(){
        $(this).parent().toggleClass("open");    
});
</script>

Answer 2

將類放在您的span元素上（如果這是您唯一要單擊的span），然后將click綁定到這些span上，如下所示：

<div class="search-input">
  <div class="input-categories">

    <span class="comm-input-value input-span">Any unit type </span>
    <span class="icon fa fa-angle-down input-span"></span>

  </div>
</div>

並且在Jquery中，無需放置if else語句以刪除開放使用切換類

$('.input-span').on('click',function(){

             $(this).parent().toggleClass("open");    

});

Answer 3

 $('.input-categories').on('click', function() { $(this).parent().toggleClass('open'); }); 

 @import url("https://use.fontawesome.com/releases/v5.1.0/css/all.css"); @import url("https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"); .input-categories { cursor: pointer; } 

 <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script> <div class="search-input"> <div class="input-categories"> <span class="comm-input-value">Any unit type </span> <span class="icon fa fa-angle-down"></span> </div> </div> 

有編寫代碼的簡單方法。 為什么少寫能多寫？

Answer 4

您的代碼運行良好。 在以下示例中進行檢查：

 $('.input-categories').on('click',function(){ alert("clicked"); }); 

 .icon{ margin-left: 30px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"> <div class="search-input"> <div class="input-categories"> <span class="comm-input-value">Any unit type </span> <span class="icon fa fa-angle-down"></span> </div> </div>