0

我正在使用 jQuery 在单击链接时滑动打开和关闭菜单，效果很好。但是，我试图在菜单滑动打开之前单击链接时添加一个类，然后在菜单滑动关闭后删除相同的类。

所以：单击 > addClass > 滑动菜单打开 > 再次单击 > 滑动菜单关闭 > 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>
4

5 回答 5

3

这将按照您要求的顺序进行：

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

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

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

编辑

在这个jsfiddle中检查它

于 2012-05-03T04:43:19.957 回答
1

尝试以下操作：

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

我不完全确定上面的代码会 100% 工作，因为我没有机会实际测试它，但我的想法是，如果元素具有“开放”类，那么你想删除它（因为你' 再次单击并正在关闭 div）。如果您单击并且元素没有“open”类，那么您希望将其添加到 div。

于 2012-05-03T04:36:17.053 回答
1

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

<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>
于 2012-05-03T04:46:37.020 回答
1

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

$('#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/

于 2012-05-03T04:49:00.293 回答
1

我只是在寻找其他东西时遇到了这个。这是一个工作代码。

/ ===================脚本从这里开始 ==================== /

(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);

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

这是HTML：

<div id="open_sidebar">打开窗口</div>

这是点击时会发生的情况：

<div id="open_sidebar" class="open">关闭窗口</div>

在第二次点击：

<div id="open_sidebar" class="close">打开窗口</div>
于 2013-10-15T00:27:12.597 回答