Jquery slideToggle无法使用display none css

Question

1. 以下jquery slideToggle功能无法正常工作。
2. 隐藏的内容可以暂时显示但不可见

$(document).ready(function() {
  $(".mainmenu li").click(function() {
    $(this).find('.submenu').slideToggle();
  });
});

.submenu {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="mainmenu">
  <li>one
    <ul>
      <li class="submenu">abc</li>
      <li class="submenu">bca</li>
      <li class="submenu">cab</li>
    </ul>
  </li>
  <li>two
    <ul>
      <li class="submenu">abc</li>
      <li class="submenu">bca</li>
      <li class="submenu">cab</li>
    </ul>
  </li>

</ul>

Answer 1

而不是将submenu设为display: none，尝试创建一个像submenu-wrap到ul的包裹并将其设为display:none。并在jquery中将其作为目标。

＆＃13;

＆＃13;

$(document).ready(function () {
        $(".mainmenu li").click(function () {

            $(this).find('.submenu-wrap').slideToggle();
        });
    });

＆＃13;

.submenu-wrap{
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="mainmenu">
            <li>
                <ul class="submenu-wrap">
                    <li class="submenu">abc</li>
                    <li class="submenu">bca</li>
                    <li class="submenu">cab</li>
                </ul>
            </li>
            <li>
                <ul  class="submenu-wrap">
                    <li class="submenu">abc</li>
                    <li class="submenu">bca</li>
                    <li class="submenu">cab</li>
                </ul>
            </li>    

        </ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你只需要将内容添加到主菜单列表，它的工作原理，但由于CSS定位不正确..

export default function() {
  return {    
    position: {
      x: 0,
      y: 10,
      z: 0
    },
    moveForward: false,
    moveBackward: false,
    moveLeft: false,
    moveRight: false,
    velocity: {
      x: 0,
      z: 0
    },
    mouseMovement: {
      x: 0,
      y: 0
    },
    rotation: {
      x: 0,
      y: 0
    }
  }
};

Answer 3

＆＃13;

＆＃13;

$(document).ready(function () {
        $(".mainmenu li").click(function () {

            $(this).find('.submenu-wrap').slideToggle();
        });
    });

＆＃13;

.submenu-wrap{
  display: none;
}
 ul li {cursor:pointer}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="mainmenu">
            <li>test-1
                <ul class="submenu-wrap">
                    <li class="submenu">abc</li>
                    <li class="submenu">bca</li>
                    <li class="submenu">cab</li>
                </ul>
            </li>
            <li> test-2
                <ul  class="submenu-wrap">
                    <li class="submenu">abc</li>
                    <li class="submenu">bca</li>
                    <li class="submenu">cab</li>
                </ul>
            </li>    

        </ul>

＆＃13;

＆＃13;

＆＃13;

Answer 4

试试这段代码。如果您点击另一个子菜单

，这也将关闭其他子菜单

＆＃13;

＆＃13;

$(document).ready(function() {
  $(".mainmenu>li>span").click(function() {
    $(this).closest('li').siblings('li').find('.submenu').slideUp();
    $(this).next('.submenu').slideToggle();
  });
});

＆＃13;

.submenu {
  display: none;
}

ul.mainmenu {
  list-style: none;
}

ul.mainmenu>li {
  display: inline-block;
  position: relative;
  margin: 0 10px;
}

ul.submenu {
  position: absolute;
  top: 100%;
  list-style: none;
  padding: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="mainmenu">
  <li>
    <span>One</span>
    <ul class="submenu">
      <li>abc</li>
      <li>bca</li>
      <li>cab</li>
    </ul>
  </li>
  <li>
    <span>Two</span>
    <ul class="submenu">
      <li>abc</li>
      <li>bca</li>
      <li>cab</li>
    </ul>
  </li>

</ul>

＆＃13;

＆＃13;

＆＃13;