Question

我正在尝试展开菜单What We Do Let's Meet。

问题：div位于导航栏下方，就像100％宽度的大菜单一样。我以某种方式做到了working on codepen，但发现解决方案是天真的。我怎样才能拥有强大的菜单设计，我可以自动获取onclick切换ul中的每个li元素，并将div类作为目标。其次，我无法在点击时更改背景颜色li元素。

＆＃13;

$( ".sub-menu1" ).click(function() {
  $( ".sub-menu-list" ).toggle();
  $( ".sub-menu-list1" ).hide();

});
$( ".sub-menu2" ).click(function() {
  $( ".sub-menu-list1" ).toggle();
  $( ".sub-menu-list" ).hide();
});

＆＃13;

header.header {
  color: #111;
  background: rgba(255,255,255,1);
  width: 100%;
  displaY: flex;
  justify-content: space-between;
  font-weight:600;
}

header .header-item {
  align-self: center;
}
header .header-items {
  display:inline-block;
  padding:0 3rem 0 0;
}
header li.header-items:last-child {
  padding:0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="header-item">
    <li class='header-items'>Hi!</li>
    <li class='header-items'><a class="sub-menu1" href="#" > What We Do</a></li>
    <li class='header-items'><a class="sub-menu2" href="#">Let's Meet</a></li>
  </nav>
</header>
<section class="sub-menu-list" onfocusout="closed()">
  <div str-row>

    <div class="box" str-xs="12" str-sm>
      <a href="#"><img class="responsive" src="http://dummyimage.com/100x100/000/fff" />
        <p>1</p>
      </a>
    </div>
    <div class="box" str-xs="12" str-sm>
      <a href="#"><img class="responsive" src="http://dummyimage.com/100x100/000/fff" />
        <p>2</p>
      </a>
    </div>
    <div class="box" str-xs="12" str-sm>
      <a href="#"><img class="responsive" src="http://dummyimage.com/100x100/000/fff" />
        <p>3</p>
      </a>
    </div>
    <div class="box" str-xs="12" str-sm>
      <a href="#"><img class="responsive" src="http://dummyimage.com/100x100/000/fff" />
        <p>4</p>
      </a>
    </div>

  </div>

  <form class="ci_form" action='' method='post'>
    <div str-row>
      <div str-xs="12" str-sm="4" str-sm-offset="2">
        <input type="text" placeholder="Enter Name" name="fname">
      </div>
      <div str-xs="12" str-sm="4">
        <input type="tel" placeholder="Contact Number" name="phone">
      </div>
    </div>
    <section str-row>
      <div str-sm="4" str-sm-offset="2" str-xs="12">
        
      </div>
      <div str-sm="4" str-xs="12">
        <select id="fieldselector">
          <option value="0">Select Reason to Contact</option>
          
        </select>
      </div>
    </section>
    <div str-row>
      <div str-xs="12" str-sm="8" str-sm-offset="2">
        <button class="button submission">Get Quote</button>
      </div>
    </div>
  </form>
</section>
<section class="sub-menu-list1">
  <div str-row>

    <div class="box" str-xs="12" str-sm>
      <a href="#"><img class="responsive" src="http://dummyimage.com/100x100/000/fff" />
        <p>1</p>
      </a>
    </div>
    <div class="box" str-xs="12" str-sm>
      <a href="#"><img class="responsive" src="http://dummyimage.com/100x100/000/fff" />
        <p>2</p>
      </a>
    </div>
    <div class="box" str-xs="12" str-sm>
      <a href="#"><img class="responsive" src="http://dummyimage.com/100x100/000/fff" />
        <p>3</p>
      </a>
    </div>
    <div class="box" str-xs="12" str-sm>
      <a href="#"><img class="responsive" src="http://dummyimage.com/100x100/000/fff" />
        <p>4</p>
      </a>
    </div>

  </div>

  
</section>

＆＃13;

代码段看起来不准确，但在某种程度上可能会有所帮助。 Codepen演示看起来好多了。上面给出的链接。

Jquery onclick切换大div菜单

0 个答案: