Question

我想在我的网站上展开onclick展开多个菜单

在我关注这个帖子之前：this稍加修改我得到：

<ul>
  <rg><li id="auctions">Menu</li></rg>
  <br></br>
  <lf>
    <li class="submenu">Left</li>
  </lf>
  <rg>
    <li class="submenu">Right</li>
  </rg>
</ul>

但它只显示一个菜单，然后我创建一个像这样的副本：

<ul>
  <rg><li id="auctions">Menu</li></rg>
  <br></br>
  <lf>
    <li class="submenu">Left</li>
  </lf>
  <rg>
    <li class="submenu">Right</li>
  </rg>
</ul><ul>
  <rg><li id="auctions2">Menu</li></rg>
  <br></br>
  <lf>
    <li class="submenu2">Left</li>
  </lf>
  <rg>
    <li class="submenu2">Right</li>
  </rg>
</ul>

JS和CSS就像这样：

<script>
$(function() {
    $('#auctions').click(function(){
      $('.submenu').slideToggle();
    });
});
$(function() {
    $('#auctions2').click(function(){
      $('.submenu2').slideToggle();
    });
});
</script>

<style>
  .submenu{display:none;}
  .submenu2{display:none;}
  rg {float:right}
  lf {float:left}
</style>

它的工作但不运行inline。然后我使用ul {display:inline-block}

是的，菜单正在运行inline，但它已损坏且float无法正常运行。可以修复吗？或者我可以在同一个<ul>制作多个菜单吗？

Answer 1

将rg和lf作为类，并相应地更改html以获得所需的样式。

但我建议您在使用之前考虑学习ul和li tags and its properties

＆＃13;

$(function() {
  $('#auctions').click(function() {
    $('.submenu').slideToggle();
  });
});
$(function() {
  $('#auctions2').click(function() {
    $('.submenu2').slideToggle();
  });
});

＆＃13;

ul {
  display: block;
  margin:0;
  padding:0;
  width:100%;
}

li {
  list-style: none;
}
li.main {
  width:100%;
  text-align:right;
}

.submenu {
  display: none;
}

.submenu2 {
  display: none;
}

.rg {
  float: right;
}

.lf {
  float: left;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <ul>
      <li id="auctions" class="main rg">Menu</li>
      <li>
        <ul>
          <li class="submenu lf">Left</li>
          <li class="submenu rg">Right</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <ul>
      <li id="auctions2" class="main rg">Menu</li>
      <li>
        <ul>
          <li class="submenu2 lf">Left</li>
          <li class="submenu2 rg">Right</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

＆＃13;

onclick展开多个菜单

1 个答案: