7

私は次のjQueryを持っています:

<script type="text/javascript">
$('.showFood').on('click', function () {
    $(this).addClass('selected').siblings().removeClass('selected');
    $('.targetFood').hide();
    $('#food' + $(this).data('target')).show(function() {
        $('#food' + $(this).data('target')).toggle("slide");
    });
});
$('.showFood').first().click();
</script>

次の HTML:

<ul class="menus-nav">
<li><a href="#menu1" class="showFood" data-target="1">Menu 1</a></li>
<li><a href="#menu2" class="showFood" data-target="2">Menu 2</a></li>
<li><a href="#menu3" class="showFood" data-target="3">Menu 3</a></li>
</ul>
<div id="food1" class="targetFood">
<p>Items from menu 1</p>
</div>

<div id="food2" class="targetFood">
<p>Items from menu 2</p>
</div>

<div id="food3" class="targetFood">
<p>Items from menu 3</p>
</div>

メニューをナビゲートするときに選択したクラスが削除されず、すべてのメニューをクリックするとすべてのクラスが選択されることを除いて、すべてが正常に機能します。

私は javascript や jquery の経験があまりないので、どなたか助けていただけないでしょうか?

注: HTML はデモ用に縮小されています。

フィドル

4

5 に答える 5

10

次のコード行が問題になる可能性があります。

$(this).addClass('selected').siblings().removeClass('selected');

最初にクラスを削除してから、選択した要素に追加することをお勧めします。

$('.selected').removeClass('selected'); // remove all current selections
$(this).addClass('selected')            // select this element
于 2013-10-01T10:04:04.110 に答える
8

あなたが試すことができます

$('.showFood').on('click', function () {
$('.showFood').removeClass('selected');// here remove class selected from all showfood
    $(this).addClass('selected');// here apply selected class on clickable showfood
    $('.targetFood').hide();
    $('#food' + $(this).data('target')).show(function() {
        $('#food' + $(this).data('target')).toggle("slide");
    });
});
于 2013-10-01T10:04:38.880 に答える
1

jQuery 1.7+をお持ちの場合は、おそらく

変化する：

$('.showFood').on('click', function () {
    //YOUR CODES HERE
})

に

$(document).on('click', '.showFood', function () {
    //YOUR CODES HERE
})
于 2013-10-01T10:03:56.787 に答える
1

使用する

$('.showFood').on('click', function () {
$('.showFood').removeClass('selected'); //remove selected class from all elements with class showFood
    $(this).addClass('selected')
    $('.targetFood').hide();
    $('#food' + $(this).data('target')).show(function() {
        $('#food' + $(this).data('target')).toggle("slide");
    });
});
于 2013-10-01T10:05:29.887 に答える