Question

我试图为手机大小制作响应式菜单。我想要的是一个可折叠的导航菜单，例如：

（不扩展）BUTTON A
（不扩展）BUTTON B
（可扩展）BUTTON C
BUTTON C选项A

因此，当您首先看到菜单时，您只会看到按钮A，B和C. 当您单击按钮C时，它下面会出现（通过单击它）选项A。

到目前为止我所拥有的是一个带有三行导航图标的按钮。单击它时，您会看到按钮a，b，c。但是当您单击按钮c时，整个列表会折回，重新打开时，您会看到完整列表。这不是我想到的......

我的编码：的 HTML

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
        $(".text").hide();
        $(".accordeon div:first-child").addClass("expand_first");
        $(".expand").click(function() {
                $(".text").slideUp(500);
                if ($(this).next(".text").is(":visible")) {
                        $(this).next(".text").slideUp(500);
                } else {
                        $(this).next(".text").slideToggle(500);
                }
        });
});
  $(window).load(function() {
    $('.flexslider').flexslider();
  });
$('ul li a').click(function() {
    $(this).parent().find('ul.sub-menu').toggle();
    return false;
});
</script>

<div id="nav-small">
        <div class="accordeon">
                <div class="expand"><img src="http://localhost:8080/wordpress/wp-content/uploads/2016/06/navicon.png" alt="Navigation" width="50%" height="auto" />
                      Navigation
                </div>
                <div class="text">      
                <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Library</a></li>
                <li class="sub-menu"><a href="#">Lifestyle</a>▼
                    <ul>
                        <li><a href="#">Cleaning & Organizing</a></li>
                        <li><a href="#">Health & Beauty</a></li>
                        <li><a href="#">Travel</a></li>
                    </ul>
                </li>
                </ul>

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

我的 CSS ：

#nav-small{
    width:100%;
    height:auto;
}
#nav-small img{
    width:50%;
    max-width:30px;
    max-height:30px;
}
#nav-small ul{
    list-style:none;
    padding:0;
    margin:0;
    font-family:verdana;
}
#nav-small ul li{
    text-align:center;
    text-decoration:none;
    padding: 2% 0;
    border-bottom:1px solid black;
}
#nav-small ul li a{
    text-decoration:none;
}
#nav-small ul li.sub-menu{
    border-bottom:none;
    padding-bottom:0;
}
.accordeon{
    text-align:center;
    background-color: rgba(104,144,192,1.00) ;
    width:100%;
}
.accordeon .expand {
    display:inline-block;
    width:30%;
    height:auto;
    margin:auto;
    font-family: Verdana;
    background-color: rgba(104,144,192,1.00) ;
    cursor:pointer;
    padding:1% 0;
    border-left:1px solid #ccc;
    border-right:1px solid #ccc;
}
.accordeon .text{
        display:none;
    float:left;
        width:100%;
    height:auto;
    margin:auto;
        border-top:0px;
        border-bottom:1px solid #ccc;
        background-color: rgba(211,196,213,1.00);
    text-align:left;
}

Answer 1

<强> SOLUTION：

在一个范围中包裹您的图标以添加选择器并向其添加单击事件侦听器。另外，我添加了一个使用display: none作为嵌套ul的类。

this

CODE SNIPPET

$(document).ready(function() {
  $(".text").hide();
  $(".accordeon div:first-child").addClass("expand_first");
  $(".expand").click(function() {
    $(".text").slideUp(500);
    if ($(this).next(".text").is(":visible")) {
      $(this).next(".text").slideUp(500);
    } else {
      $(this).next(".text").slideToggle(500);
    }
  });
  $("#trigger").on("click", function() {
    $(".sub-menu > ul").slideToggle(500, function() {
      $(this).toggleClass("is-not-visible");
    });
  });

});
$(window).load(function() {
  $('.flexslider').flexslider();
});
$('ul li a').click(function() {
  $(this).parent().find('ul.sub-menu').toggle();
  return false;
});

#nav-small {
  width: 100%;
  height: auto;
}

#nav-small img {
  width: 50%;
  max-width: 30px;
  max-height: 30px;
}

#nav-small ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: verdana;
}

#nav-small ul li {
  text-align: center;
  text-decoration: none;
  padding: 2% 0;
  border-bottom: 1px solid black;
}

#nav-small ul li a {
  text-decoration: none;
}

.accordeon {
  text-align: center;
  background-color: rgba(104, 144, 192, 1.00);
  width: 100%;
}

.accordeon .expand {
  display: inline-block;
  width: 30%;
  height: auto;
  margin: auto;
  font-family: Verdana;
  background-color: rgba(104, 144, 192, 1.00);
  cursor: pointer;
  padding: 1% 0;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

.accordeon .text {
  display: none;
  float: left;
  width: 100%;
  height: auto;
  margin: auto;
  border-top: 0px;
  border-bottom: 1px solid #ccc;
  background-color: rgba(211, 196, 213, 1.00);
  text-align: left;
}

.is-not-visible {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav-small">
  <div class="accordeon">
    <div class="expand"><img src="http://placehold.it/100x100" alt="Navigation" width="50%" height="auto" /> Navigation
    </div>
    <div class="text">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Library</a></li>
        <li class="sub-menu"><a href="#">Lifestyle</a> <span id="trigger">▼</span>
          <ul class="is-not-visible">
            <li><a href="#">Cleaning & Organizing</a></li>
            <li><a href="#">Health & Beauty</a></li>
            <li><a href="#">Travel</a></li>
          </ul>
        </li>
      </ul>

    </div>
  </div>
</div>

Accordeon扩大崩溃，还有一个选择

1 个答案: