Question

如果我单击带有子菜单的菜单的每个项目的li.menu-items，我想从左侧或右侧滑动子菜单。这是我的html标记

        <ul class="menu">
                        <ul>
                            <li class="menu-item">
                                <a href="#">item 1
                                </a>
                                <ul class="sub-menu">
                                    <li class="menu-item">
                                        <a href="#">item 2</a>
                                    </li>
                                    <li class="menu-item">
                                        <ul class="sub-menu">
                                           <li><a href="">item 1</li></li>
                                           <li><a href="">item 1</li></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li class="menu-item">
                                <a href="#">item 4</a>
                                <ul class="sub-menu">
                                    <li class="menu-item">
                                        <a href="#">item5</a>
                                    </li>
                                    <li class="menu-item">
                                        <a href="#">item 6</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="menu-item"><a href="#">item 7</a></li>
                            <li class="menu-item"><a href="#">item 8</a></li>
                           
                        </ul>
                    </ul>

如果我单击具有子菜单的菜单项，则子菜单将从左或右滑动，而其他菜单项应被隐藏，并且主菜单的左上方应有一个后退按钮

这是我的js

$('.menu-item').click(function(e){
    if ($('.sub-menu', this).length >=1) {
        e.preventDefault();
    }
    $(this).siblings().find('> .sub-menu').hide();
    $(this).find('> .sub-menu').slideLeft();
    e.stopPropagation();
});

请为此帮助我

Answer 1

据我所知，我认为jQuery中没有诸如slideLeft之类的任何功能。尽管您可以使用jQuery UI做到这一点，但有一个小技巧。

$(this).show("slide", { direction: "left" }, 1000);

但是我将更喜欢基于jQuery类的自定义CSS示例。检查下面的代码示例。如果您还有其他需要。请让我知道。

是的，您还犯了一个小错误：您的菜单UL是UL的直接子代，Ul只能将LI作为直接子代，请更正它并正确关闭所有标签。

$('.menu-item').click(function(e) {
  if ($('.sub-menu', this).length >= 1) {
    e.preventDefault();
  }
  debugger;
  $(this).siblings().find('> .sub-menu').removeClass('open');
  $(this).find('> .sub-menu').addClass("open");
  e.stopPropagation();
});

$('.back').click(function(e){
  $(this).closest('.sub-menu').removeClass('open');
  e.stopPropagation();
})

.menu {
  background: #cccccc;
  position: relative;
}
* {padding :0; margin: 0; box-sizing: border-box;}
.sub-menu {
  display: block;
  position: absolute;
  height: auto;
  width: 100%;
  left: -100%;
  transition: all 0.5s;
  top: 0%;
}

.sub-menu.open {
  left: 0;
  background: #666;
}

.back {cursor: pointer; margin-bottom: 20px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">

  <li class="menu-item">
    <a href="#">item 1</a>
    <ul class="sub-menu">
      <li class="back">back</li>
      <li class="menu-item">
        <a href="#">item 2</a>
      </li>
      <li class="menu-item">
        <ul class="sub-menu">
          <li class="back">back</li>
          <li><a href="">item 1</a></li>
          <li><a href="">item 1</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="menu-item">
    <a href="#">item 4</a>
    <ul class="sub-menu">
    <li class="back">back</li>
      <li class="menu-item">
        <a href="#">item5</a>
      </li>
      <li class="menu-item">
        <a href="#">item 6</a>
      </li>
    </ul>
  </li>
  <li class="menu-item"><a href="#">item 7</a></li>
  <li class="menu-item"><a href="#">item 8</a></li>


</ul>

Answer 2

我的代码不是jQuery，但我希望它对您有用。

var x = document.getElementsByClassName('menu');
var y = x[0].getElementsByTagName('a');
for (let i = 0; i < y.length; i++) {
    y[i].addEventListener("click", function () {
        var z = this.nextElementSibling;
        if(z){
            var s = z.getAttribute('style');
            if(s === 'display:none;') {
                z.setAttribute('style', 'display:block;')
            } else {
                z.setAttribute('style', 'display:none;')
            }

        }
        
    });
}

<ul class="menu">
    <ul>
        <li class="menu-item">
            <a href="#">item 1</a>
            <ul class="sub-menu">
                <li class="menu-item">
                    <a href="#">item 2</a>
                </li>
                <li class="menu-item">
                    <a href="#">item 3</a>
                    <ul class="sub-menu">
                        <li class="menu-item">
                            <a href="#">item 4</a>
                        </li>
                        <li class="menu-item">
                            <a href="#">item 5</a>
                        </li>
                    </ul>
                </li>
                <li class="menu-item">
                    <a href="#">item 6</a>
                </li>
            </ul>
        </li>
    </ul>
</ul>

带有左侧幻灯片的子菜单的jquery菜单

2 个答案: