jquery - div から指定されたコンテンツを選択する

Question

jqueryで小さな「リストボックス」セレクションを作成したいです。

<div id="first">
<ul>
    <li><a href="#">abc</a></li>
    <li><a href="#" class="active">abc1</a></li>
    <li><a href="#">abc2</a></li>
</ul>

最初に関数を作成したかったのですが、href をクリックすると、クラス「アクティブ」が追加されます。既に追加されている場合は、これを削除したかったのです。

$('#first').click( function(e)
                 {
                     $('a[href=#]').click( function(e)
                                           {
                                              alert('bla');   
                                           })


                 })

しかし、彼はアラートを3回実行しています:-/

jsfiddleを見てください

Answer 1

jQuery には、toggleClass()それを支援する便利なメソッドがあります。

$('#first').click( function(){
    $('a[href=#]').click(function(){
        $(this).toggleClass('active');

        // Disable native click
        return false;
    });
});

Answer 2

あなたのアイデアが、対応するアンカータグにアクティブなクラスを追加または削除することである場合、リストを含むdivでクリック機能を使用する必要はないと思います..必要なのは

  $('#first a').click(function(){ 
    $(this).toggleClass('active');
  });