0

水平ナビゲーションバーとしてスタイル設定された順序付けられていないリストがあります-最後のリスト項目には、以下に示すようにプルライトのクラスを持つ検索ボックスがあります...

 <div class="navbar">
    <ul>
      <li><a href="#">Coming Up</a></li>
      <li><a href="#">This Month</a></li>
      <li><a href="#">Next Month</a></li>
      <li><a href="#">All Events</a></li>
      <li><a href="#">Past Events</a></li>
      <li><a href="#">Contact Us</a></li>
      <li class="pull-right">
   <div id="event-serach-content">
    <form id="search-event" method="get" action="">
    <div class="event-search-box">
    <input type="text" placeholder="Search events..." id="frm-search" name="s">
          </div>
    <div class="event-submit-btn">
            <button type="submit">Go</button>
    </div>
    </form>
  </div>

    </li>
    </ul>

     </div>
<!-- navbar End //-->

クリックイベントでクラス「選択」を追加/削除し、スパンタグを追加する次のjQueryがあります。最後のリストを無視する方法、つまり選択したクラスを追加しない方法はありますか? 空のスパン タグには、下向き矢印の Bg があります。これが理にかなっていることを願っています、事前に感謝します。

            $(document).ready(function () {

            $(".navbar ul li:first").addClass('selected').append('<span></span>');

                $(".navbar ul li").click(function(){
                     $(".navbar ul li").removeClass('selected').find('span').empty().remove();

                     $(this).addClass('selected');
                     if ( $(this).hasClass('selected') ) {
                         // $(".navbar ul li:last").removeClass('selected').find('span').empty().remove();
                          $(".navbar ul li").append('<span></span>')
                     }
                     return false
                });

            });
4

3 に答える 3

1

Reduce the set of selected elements that you bind the click event to using :not(:last)

            $(".navbar ul li:not(:last)").click(function(){
                 $(".navbar ul li").removeClass('selected').find('span').empty().remove();

                 $(this).addClass('selected');
                 if ( $(this).hasClass('selected') ) {
                     // $(".navbar ul li:last").removeClass('selected').find('span').empty().remove();
                      $(".navbar ul li").append('<span></span>')
                 }
                 return false
            });
于 2012-12-06T09:05:09.197 に答える
1

:notおよび:lastセレクターを使用できます。

$(".navbar ul li:not(:last)")
于 2012-12-06T09:02:34.807 に答える
0

この場合、最後の子を確認するには、クリック関数に条件を追加するだけです。

$('.navbar ul li').click(function(e) {
    // If LI is not last child append class
    if ( ! $(this).is(':last-child') ) {
        $(".navbar ul li").removeClass('selected').find('span').empty().remove();
    }

    // Rest of code for click
});
于 2012-12-06T09:02:53.340 に答える