クリックしたhrefの選択に問題があります

Question

<li class="treeview"> 
      <a href="#"> 
       <i class="fa fa-laptop"></i> 
       <span>Configuration</span> 
       <span class="pull-right-container"> 
        <i class="fa fa-angle-left pull-right"></i> 
       </span> 
      </a> 
      <ul class="treeview-menu" style="display: none;"> 
       <li><a href="/Home/General"><i class="fa fa-circle-o"></i> General</a></li> 
       <li><a href="/Home/Test"><i class="fa fa-circle-o"></i> Test</a></li>     
      </ul> 
     </li> 

クリックした要素の選択に手伝ってください。私は以下を試しましたが、動作しません。

$("ul.treeview").click(function() { 
    $(this).parent().addClass('active').siblings().removeClass('acive'); 
}); 

Answer 1

クリックイベントを間違った要素に割り当てます。試してみてください：

$("ul.treeview-menu").siblings().click(function (e) { 
    $(this).find('a') // do whatever with it 
}); 

この方法では、メニュー内の<a>を選択します。

Answer 2

$("li.treeview").click(function() { 
 
    $(this).parent().addClass('active').siblings().removeClass('acive'); 
 
});

.active { 
 
    background-color: red 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="treeview"> 
 
    <a href="#"> 
 
     <i class="fa fa-laptop"></i> 
 
     <span>Configuration</span> 
 
     <span class="pull-right-container"> 
 
        <i class="fa fa-angle-left pull-right"></i> 
 
       </span> 
 
    </a> 
 
    <ul class="treeview-menu" style="display: none;"> 
 
     <li><a href="/Home/General"><i class="fa fa-circle-o"></i> General</a> 
 
     </li> 
 
     <li><a href="/Home/Test"><i class="fa fa-circle-o"></i> Test</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

チェックこの1

Answer 3

あなたはあなたがその可能性のあるコードの下に試してみてください

$("ul .treeview").click(function() { 
    $("ul .treeview a").removeClass("active") 
    var x = $(this).find('a'); 
    x.addClass("active") 
}); 

Answer 4

を使用することができますクリックしたリスト項目の中にタグを選択しようとしている場合助けて。

$("ul .treeview").click(function() { 
    $(this).siblings().removeClass('active'); 
    $(this).addClass('active'); 
}); 

すべて同じレベルliのためのアクティブなクラスを削除し、1をクリックしてアクティブなクラスを追加します。