Question

我正在使用jQuery在点击链接时打开和关闭菜单，这很有效。但是，我想在菜单幻灯片打开之前单击链接时添加一个类，然后在菜单滑回后关闭相同的类。

所以：点击＆gt; addClass＆gt;幻灯片菜单打开＆gt;再次点击＆gt;幻灯片菜单已关闭＆gt; removeClass

    $("#categoryNav").hide();
    $('#showHideLink').click(function(){
        $("#categoryNav").slideToggle(function() { 
            $('#showHideLink').toggleClass("catMenuOpen");
            $('#mainNav').toggleClass("catMenuOpen");
        });
    });

我尝试在$('#mainNav'.addClass('catMenuOpen');功能之前添加slideToggle而不是使用toggleClass，这样可以让我在第一次点击时获得正确的效果，但我无法弄清楚如何导航再次关闭后删除该类。

干杯

修改这是我的HTML：

    <div id="mainNav">
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a id="showHideLink">Show Hide</a></li>
        </ul>
    </div>
    <div id="categoryNav">
        <ul>
            <li><a href="#">CatMenu</a></li>
        </ul>
    </div>

Answer 1

这将按您提出的顺序执行：

$('#showHideLink').click(function(){

    if (!$("#categoryNav").is(":visible"))
        $('#showHideLink, #mainNav').addClass("catMenuOpen");

    $("#categoryNav").slideToggle(function() { 
        if (!$("#categoryNav").is(":visible"))
            $('#showHideLink, #mainNav').removeClass("catMenuOpen");
    });
});

修改

在此jsfiddle
中查看

Answer 2

尝试以下方法：

$('#showHideLink').click(function(){
    if($(this).hasClass("catMenuOpen"){
       $(this).removeClass("catMenuOpen");
    }else
       $(this).addClass("catMenuOpen");
    $("#categoryNav").slideToggle(function() { 
        $('#showHideLink').toggleClass("catMenuOpen");
        $('#mainNav').toggleClass("catMenuOpen");
    });

我不完全确定上面的代码会100％有效，因为我没有机会对它进行实际测试，但想法是如果元素具有“open”类，那么你想删除它（因为你再次点击并关闭了div）。如果单击并且元素没有“打开”类，则需要将其添加到div。

Answer 3

尝试创建一个具有类名的字符串数组，然后在每次单击时，切换b / w数组值..

<script>
var i=0;
var classes = new Array("catMenuClose","catMenuOpen");
$("#categoryNav").hide();
$('#showHideLink').click(function(){
    i=i*(-1)+1;
    $("#categoryNav").slideToggle(function() { 
        $('#showHideLink').toggleClass(classes[i]);
        $('#mainNav').toggleClass(classes[i]);
    });
});
</script>

Answer 4

试试这个，希望这会有所帮助

$('#showHideLink').click(function(){

    $("#categoryNav").slideToggle(function() { 
        var property = $('#categoryNav').css('display');
        if(property == 'block')
        $('#showHideLink, #mainNav').addClass("catMenuOpen");
        else
        $('#showHideLink, #mainNav').removeClass("catMenuOpen");
    });
});

这是小提琴http://jsfiddle.net/eh6jv/1/

Answer 5

我在寻找其他东西时遇到了这个问题。这是一个有效的代码。

/ ===================脚本在这里开始==================== / EM> /

(function($){ $(document).ready(function() { $('#open_sidebar').click(function() { if(!$(this).hasClass("open")) { $("#open_sidebar").toggleClass("open").removeClass('closed'); $(this).text($(this).text() == 'Close Window' ? 'Open Window' : 'Close Window'); } else { $("#open_sidebar").toggleClass("closed").removeClass('open'); $(this).text($(this).text() == 'Open Window' ? 'Close Window' : 'Open Window'); } }); }); })(jQuery);

/ ===================脚本在这里结束==================== / EM> /

这是HTML：

<div id="open_sidebar">Open Window</div>

以下是点击后会发生的事情：

<div id="open_sidebar" class="open">Close Window</div>

第二次点击：

<div id="open_sidebar" class="closed">Open Window</div>

在幻灯片打开之前添加类，使用slideToggle在幻灯片关闭后删除类？

5 个答案: