0

メニューのアクティブな項目と切り替わるサブメニューに問題があります。「Prensa」または「Contacto」をクリックすると、スクリプトがアクティブなウェルをメニュー項目に追加します。たとえば、「Prensa」がアクティブになり、「Contacto」をクリックすると、「Prensa」からアクティブになります。

問題は、「アートワーク」をクリックすると、アクティブなクラスだけでなく、そのサブメニューからのすべてのリンクも取得されることです。また、「Prensa」をもう一度クリックすると、「Artworks」のサブメニューが開いたままになり、「Artworks」のすべてのリンクがアクティブなクラスになります（「artworks」リンク自体も）。

もう1つの問題は、サブメニュー項目をクリックすると、何も追加せずに「クラス」だけが追加されるため、cssを追加してアクティブにすることができないことです。

これが私のマークアップです：

        <ul id="menu" class="menu">
            <li id="artworks"><a href="#">ARTWORK</a>
                <ul class="submenu">
                    <img src="../img/submenu.png" alt="submenu" width="62" height="1" />
                    <li><a href="#" id="sweetlife">Sweet Life</a></li>
                    <li><a href="#">Pleasure</a></li>
                    <li><a href="#">Bienal de la habana</a></li>
                    <li><a href="#">Estudios de craneos</a></li>
                </ul>
            </li>
            <li id="prensa_nav"><a href="#">PRENSA</a></li>
            <li id="contacto_nav"><a href="#">CONTACTO</a></li>
        </ul>

これが私のjsです：

    // active menu item
$(function() {
    $('#menu li').click(function() {
        $('#menu li').each(function() {
            $(this).removeClass('active');
        });
        $(this).addClass('active');
    });
});


    /* Menu dropdown */
    $(document).ready(function($){

    // Add class of drop if item has sub-menu
    $('ul.submenu').closest('li').addClass('drop');

    // Left Sidebar Main Navigation
    var menu_ul = $('.menu > li.drop > ul'),
        menu_a  = $('.menu > li.drop > a');

    menu_ul.hide()    

    menu_a.click(function(e) {
        e.preventDefault();
        if(!$(this).hasClass('active')) {
            menu_a.removeClass('active');
            menu_ul.filter(':visible').slideUp('normal');
            $(this).addClass('active').next().stop(true,true).slideDown('normal');
        } else {
            $(this).removeClass('active');
            $(this).next().stop(true,true).slideUp('normal');
        }
    });

});

誰かがこれらの問題を解決するのを手伝ってくれますか？

4

2 に答える 2

1

他のすべての子ではなく、アクティブメニューの直接の子のみをスタイル設定する必要があります。

スクリプトの場合、サブメニューのクリックは2回呼び出されます。1回は子で、もう1回は親です。最初の呼び出しは子にクラスを設定しますが、2番目の呼び出しはそれを即座に削除します。jQueryでクリックのこの「伝播」を防ぐことができます。

例： http： //jsfiddle.net/willemvb/q96FK/

于 2012-10-15T09:22:05.477 に答える
0

このスタイルコードを使用します

 $(function() {
   $('#menu li').click(function() {
        $(".active").removeClass('active');
        $(this).addClass('active');
   });
});

$(document).ready(function($){

// Add class of drop if item has sub-menu
$('ul.submenu li:first').addClass('drop');
var menu_ul = $('.menu li.drop ul'),
menu_a  = $('.menu li.drop a');

よろしくお願いします

于 2012-10-15T09:21:42.543 に答える