防止在jquery上调用同一个类

Question

实际上，我有一个滑块来显示我的菜单，这个菜单从右到左滑到下一个级别，然后从左到右返回，但是当我点击“返回”时，是的，返回，但同时返回到实际的div，下面是我的代码。

<div class="total">
    <div class="slidepanel">
        <center>
            <button id="sleft">&laquo;</button>
            <button id="sright">&raquo;</button>
        </center>
        <div class="box-wrapper">
            <div class="block" id ="block1">
                <ul id="mm-1" class="mm-list visible">
                    <li><a class="mm-next" href="#" data-target="#parent-1">parent 1</a></li>
                    <li><a class="mm-next" href="#" data-target="#parent2">parent 2</a></li>
                    <li><a class="mm-next" href="#" data-target="#parent-3">parent 3</a></li>
                </ul>
            </div>
            <div class="block" id ="block2">

                <ul id="women" class="mm-list subCat-Mobile">
                    <li class="backMenu"><a class="mm-next icon" href="#" data-target="#mm-1">
                            <i class="glyphicon glyphicon-triangle-left"></i> Return Home</a></li>
                    <li class="menu-title"><span>title parent 1</span></li>
                    <li><a class="mm-next" href="#" data-target="#women-features">sub parent 1</a></li>

                </ul>

                <ul id="men" class="mm-list subCat-Mobile">
                    <li class="backMenu"><a class="mm-next icon backMenu" href="#" data-target="#mm-1">
                            <i class="glyphicon glyphicon-triangle-left"></i>Return Home</a></li>
                    <li class="menu-title"><span>title parent 2</span></li>
                    <li><a class="mm-next" href="#" data-target="#men-features">sub parent 2</a></li>
                </ul>

                <ul id="hilfiger" class="mm-list subCat-Mobile">
                    <li class="backMenu"><a class="mm-next icon backMenu" href="#" data-target="#mm-1">
                            <i class="glyphicon glyphicon-triangle-left"></i>Return Home</a></li>
                    <li><a href="/tommy-denim-mujer/">title parent 3</a></li>
                    <li><a href="/tommy-denim-hombre/">Hombre</a></li>
                </ul>
            </div>
            <div class="block" id ="block3">
                <!-- women -->
                <ul id="women-features" class="mm-list subCat-Mobile mm-listView">
                    <li class="backMenu"><a class="mm-next icon backMenu" href="#" data-target="#women">
                            <i class="glyphicon glyphicon-triangle-left"></i>Return previous parent</a></li>
                    <li class="menu-title"><span>title subcat 1</span></li>

                    <li><a href="/femenino/novedades/">subcat 1</a></li>
                    <li><a href="/tommy-x-gigi/">subcat 2</a></li>

                </ul>

                <!-- men -->
                <ul id="men-features" class="mm-list subCat-Mobile mm-listView">
                    <li class="backMenu"><a class="mm-next icon backMenu" href="#" data-target="#men">
                            <i class="glyphicon glyphicon-triangle-left"></i>Return previous parent</a></li>
                    <li class="menu-title"><span>title subcat 2</span></li>
                    <li><a href="/masculino/novedades">subcat 1</a></li>
                </ul>


            </div>
        </div>
    </div>
</div>

下一个是我的剧本。

$(document).on('click', '.mm-next', function (e) {
        e.preventDefault();
        var target = $(this).data("target");
        var others = $("div.menu-left").find(".mm-list").not(target);
        others.hide();
        $(target).show();

        return false;
    });
$(document).ready(function() {

var cur = 1;
var max = $(".box-wrapper div").length;


$("#sright, li.backMenu a.mm-next.icon").click(function(){
    if (cur == 1 && cur < max)
        return false;
       cur--;

     $(".block").animate({"left": "+=24.9%"}, "slow");

});

$("#sleft, li a.mm-next").click(function(){
  if (cur+1 > max) 
      return false;
    cur++; 

   $(".block").animate({"left": "-=24.9%"}, "slow");
});
});

如何防止隐藏/向容器显示同一个容器？当你点击“返回”选项时，你可以检查这个问题？

这是我的小提琴

Answer 1

如果我正确地理解了你的问题，为什么不把你的“返回家园”选项的类名改为mm-previous而不是mm-next呢？然后，您可以执行以下操作：

$("#sright, li.backMenu a.mm-previous.icon").click(function(){      
  $(".block").animate({"left": "+=24.9%"}, "slow")
})

$("#sleft, li a.mm-next").click(function(){   
  $(".block").animate({"left": "-=24.9%"}, "slow")
})

小提琴这里.

它对你来说是双向的，因为在这两种情况下，你的选择都会触发。因此，您需要设置一个命名约定，以帮助您更好地区分元素。