1

如果我单击具有子菜单的菜单的每个项目的 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();
});

请帮帮我

4

2 回答 2

2

据我所知，我认为 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>

于 2020-10-12T07:29:19.153 回答
0

我的代码不是 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>

于 2020-10-12T08:19:01.813 回答