显示嵌套uls的正确方法是什么？

Question

我正在尝试为移动设备创建嵌套侧边栏菜单。 当我点击span.big时，我希望下一个ul变得可见。 所以我打电话给.next()。 现在嵌套的ul确实显示了，但问题是下面的li不会向下移动，这意味着ul与li重叠。

(function($) {
  $('.big').click(function() {
    $(this).next();
  });
})(jQuery);

如何让李正确向下移动？

    (function($) {

      $('.big').click(function() {
        $(this).next();
      });

    })(jQuery);

#cssmenu {
  background-color: #333333;
  height: 100%;
  font-family: Arvo, serif;
  font-size: 17px;
  font-weight: normal;
  color: white;
}
#cssmenu ul {
  list-style: none;
  padding-left: 0;
}
#cssmenu li {
  height: 50px;
}
#cssmenu ul>li {
  padding-top: 13px;
  border-bottom: 1px solid rgba(120, 120, 120, 0.2)
}
#cssmenu ul>li>a {
  color: white;
  margin-left: 15px;
}
#cssmenu ul>li>ul {
  display: none;
}
#cssmenu span.big {
  float: right;
  border-left: 1px solid rgba(120, 120, 120, 0.2);
  border-left: 1px solid rgba(120, 120, 120, 0.2);
  height: 50px;
  width: 50px;
  margin-top: -13px;
  font-size: 1.5em;
  padding-left: 17px;
  padding-top: 5px;
}
#cssmenu span:hover {
  background-color: rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left-nav">
  <div id='cssmenu'>
    <ul>
      <li><a href='#'>Home</a>
      </li>
      <li class='active'><a href='#'>Products</a>
        <span class="big">+</span>
        <ul>
          <li><a href='#'>Product 1</a>
            <ul>
              <li><a href='#'>Sub Product</a>
              </li>
              <li><a href='#'>Sub Product</a>
              </li>
            </ul>
          </li>
          <li><a href='#'>Product 2</a>
            <ul>
              <li><a href='#'>Sub Product</a>
              </li>
              <li><a href='#'>Sub Product</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href='#'>About</a>
      </li>
      <li><a href='#'>Contact</a>
      </li>
    </ul>
  </div>
</div>

Answer 1

限制了li的高度，因此子菜单无法正常显示。

另外，您不能使用JQuery next语句选择任何内容。

正如评论中所述，如果li需要高度，则可以将min-height替换为height。

＆＃13;

＆＃13;

$(document).ready(function() {
  $('.big').click(function() {
    $(this).next('ul').slideToggle();
  });
});

＆＃13;

* {
  margin: 0;
  box-sizing: border-box;
}
#cssmenu {
  background-color: #333333;
  height: 100%;
  font-family: Arvo, serif;
  font-size: 17px;
  font-weight: normal;
  color: white;
}
#cssmenu ul {
  list-style: none;
  padding-left: 0;
}
#cssmenu >ul > li {
  min-height: 50px;
}
#cssmenu ul>li {
  padding-top: 13px;
  border-bottom: 1px solid rgba(120, 120, 120, 0.2)
}
#cssmenu ul>li>a {
  color: white;
  margin-left: 15px;
}
#cssmenu ul>li>ul {
  display: none;
}
#cssmenu span.big {
  height: 50px;
  float: right;
  border-left: 1px solid rgba(120, 120, 120, 0.2);
  border-left: 1px solid rgba(120, 120, 120, 0.2);
  width: 50px;
  margin-top: -13px;
  font-size: 1.5em;
  padding-left: 17px;
  padding-top: 5px;
}
#cssmenu span:hover {
  background-color: rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left-nav">
  <div id='cssmenu'>
    <ul>
      <li><a href='#'>Home</a>
      </li>
      <li class='active'><a href='#'>Products</a>
        <span class="big">+</span>
        <ul>
          <li><a href='#'>Product 1</a>
            <ul>
              <li><a href='#'>Sub Product</a>
              </li>
              <li><a href='#'>Sub Product</a>
              </li>
            </ul>
          </li>
          <li><a href='#'>Product 2</a>
            <ul>
              <li><a href='#'>Sub Product</a>
              </li>
              <li><a href='#'>Sub Product</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href='#'>About</a>
      </li>
      <li><a href='#'>Contact</a>
      </li>
    </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在jQuery中，<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:WpfApplication1" mc:Ignorable="d" Title="MainWindow" Height="250" Width="250" WindowStartupLocation="CenterScreen"> <Window.DataContext> <local:MainWindowViewModel/> </Window.DataContext> <Grid> <Menu DockPanel.Dock="Top"> <Menu.Resources> <Style TargetType="{x:Type MenuItem}"> <Setter Property="Command" Value="{Binding MainWindowCommand}"/> </Style> </Menu.Resources> <MenuItem Header="_File"> <MenuItem Header="_Properties..." CommandParameter="{x:Static local:CommandTargets.EditProperties}"/> </MenuItem> </Menu> </Grid> </Window> 仅用于选择元素的下一个兄弟。 这意味着您的javascript代码没有执行任何操作，因为您没有使用<Window x:Class="WpfApplication1.PropertiesView" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:WpfApplication1" mc:Ignorable="d" Title="PropertiesView" Height="300" Width="300" WindowStartupLocation="CenterScreen"> <Window.DataContext> <local:MainWindowViewModel/> </Window.DataContext> <Grid> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <ListView Grid.Row="0" x:Name="ItemList" ItemsSource="{Binding Crowd, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" HorizontalContentAlignment="Stretch" SelectionMode="Single" SelectedItem="{Binding SelectedItem, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"> <ListView.View> <GridView> <GridViewColumn Header="Name" Width="100" DisplayMemberBinding="{Binding Name}" /> </GridView> </ListView.View> </ListView> <StackPanel Grid.Row="1" DataContext="{Binding ElementName=ItemList, Path=SelectedItem}"> <Label Grid.Column="0" Grid.Row="0" Content="Name: " VerticalAlignment="Center" Foreground="Black"/> <TextBox Grid.Column="1" Grid.Row="0" Text="{Binding Name, UpdateSourceTrigger=PropertyChanged}" Margin="5"/> </StackPanel> </Grid> </Window>

的结果

Answer 3

jsFiddle：https://jsfiddle.net/6yesewh9/

此修复程序正在将您的问题height更改为min-height

#cssmenu li{
    min-height:50px;
}

此外，我在您的jQuery代码

中更改了您的.next以使用.siblings`