创建一个带有一些超级菜单的动态菜单

Question

我试图创建一个动态菜单，每个包含一个像图像中的块，我尝试了下一个jquery代码，但它没有工作

以下是我要创建的菜单的示例

＆＃13;

＆＃13;

 $(".drop-down").click(function() {
						$('.mega-menu').addClass('display-on');
                        $('.mega-menu').siblings().removeClass('dislplay-on');
					});
					
});

＆＃13;

.drop-down > a:after{
            content:"\f103";
            color:#fff;
            font-family: FontAwesome;
            font-style: normal;
            margin-left: 5px;
}
nav.menu{min-height: 45px;
      background: coral;  
     display: inline-block;
    position: relative;
    height: 100%;
    width: 100%
}
.menu > ul > li{list-style: none;
            display:inline-block;
            color:#fff;
            line-height: 45px
}
.mega-menu{position: absolute;
           background: none repeat scroll #888;
            width:100%;
            margin-top: 3px;
            padding:15px;
            left:0;
            display: none;
            transition-duration: 0.9s
}
.display-on{
                display:block;
             transition-duration: 0.9s;
}
.mega-menu ul{margin: 0 25px}

＆＃13;

<!-- Here is the html content-->

<nav class="menu">
        <ul>
            <li class="active"><a href="#">Home</a></li>
            <li class="drop-down">
                <a href="#">Home</a>
                <div class="mega-menu fadeIn animated">
                   <div class="row">
                    <div class="col-md-3">
                      <ul>
                          <li>test</li>
                          <li>test</li>
                          <li>test</li>
                          <li>test</li>
                          <li>test</li>
                      </ul> 
                    </div>
                    <div class="col-md-3">
                        <ul>
                          <li>test</li>
                          <li>test</li>
                          <li>test</li>
                          <li>test</li>
                          <li>test</li>
                      </ul> 
                    </div>
                    <div class="col-md-3">
                        <ul>
                          <li>test</li>
                          <li>test</li>
                          <li>test</li>
                          <li>test</li>
                          <li>test</li>
                      </ul>  
                    </div>
                    <div class="col-md-3">
                        <ul>
                          <li>test</li>
                          <li>test</li>
                          <li>test</li>
                          <li>test</li>
                          <li>test</li>
                      </ul>
                    </div>
                   </div>
                </div>
            </li>
            <li class="drop-down">
                <a href="#">Home</a>
                <div class="mega-menu fadeIn animated">
                   <div class="row">
                    <div class="col-md-3">
                      <ul>
                          <li>test</li>
                          <li>test</li>
                          <li>test</li>
                          <li>test</li>
                          <li>test</li>
                      </ul> 
                    </div>
                    <div class="col-md-3">
                        <ul>
                          <li>test</li>
                          <li>test</li>
                          <li>test</li>
                          <li>test</li>
                          <li>test</li>
                      </ul> 
                    </div>
                    <div class="col-md-3">
                        <ul>
                          <li>test</li>
                          <li>test</li>
                          <li>test</li>
                          <li>test</li>
                          <li>test</li>
                      </ul>  
                    </div>
                    <div class="col-md-3">
                        <ul>
                          <li>test</li>
                          <li>test</li>
                          <li>test</li>
                          <li>test</li>
                          <li>test</li>
                      </ul>
                    </div>
                   </div>
                </div>
            </li>
            <li class="drop-down">
                <a href="#">Home</a>
                <div class="mega-menu fadeIn animated">
                   <div class="row">
                    <div class="col-md-3">
                      <ul>
                          <li>gaagag</li>
                          <li>test</li>
                          <li>test</li>
                          <li>test</li>
                          <li>test</li>
                      </ul> 
                    </div>
                    <div class="col-md-3">
                        <ul>
                          <li>test</li>
                          <li>test</li>
                          <li>test</li>
                          <li>test</li>
                          <li>test</li>
                      </ul> 
                    </div>
                    <div class="col-md-3">
                        <ul>
                          <li>test</li>
                          <li>test</li>
                          <li>test</li>
                          <li>test</li>
                          <li>test</li>
                      </ul>  
                    </div>
                    <div class="col-md-3">
                        <ul>
                          <li>test</li>
                          <li>test</li>
                          <li>test</li>
                          <li>test</li>
                          <li>test</li>
                      </ul>
                    </div>
                   </div>
                </div>
            </li>
        </ul>
    </nav>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

在这张图片中，当你点击上面的主要列表时，一个新的块滑落，前一个块消失，我想创建一个这样的：

Answer 1

好的，所以有点混淆了被点击的内容以及它与你的下拉和链接的关系。我想出了这个似乎有效的方法。

＆＃13;

＆＃13;

$(".drop-down > a").click(function() {
  var $dropdown = $(this).closest('.drop-down');
  $('.mega-menu').removeClass('display-on');
  $dropdown.find('.mega-menu').addClass('display-on');
});

＆＃13;

.drop-down>a:after {
  content: "\f103";
  color: #fff;
  font-family: FontAwesome;
  font-style: normal;
  margin-left: 5px;
}

nav.menu {
  min-height: 45px;
  background: coral;
  display: inline-block;
  position: relative;
  height: 100%;
  width: 100%
}

.menu>ul>li {
  list-style: none;
  display: inline-block;
  color: #fff;
  line-height: 45px
}

.mega-menu {
  position: absolute;
  background: none repeat scroll #888;
  width: 100%;
  margin-top: 3px;
  padding: 15px;
  left: 0;
  display: none;
  transition-duration: 0.9s
}

.display-on {
  display: block;
  transition-duration: 0.9s;
}

.mega-menu ul {
  margin: 0 25px
}

＆＃13;

<!-- Here is the html content-->

<nav class="menu">
  <ul>
    <li class="drop-down">
      <a href="#">Home</a>
      <div class="mega-menu fadeIn animated">
        <div class="row">
          <div class="col-md-3">
            <ul>
              <li>test</li>
              <li>test</li>
              <li>test</li>
              <li>test</li>
              <li>test</li>
            </ul>
          </div>
          <div class="col-md-3">
            <ul>
              <li>test</li>
              <li>test</li>
              <li>test</li>
              <li>test</li>
              <li>test</li>
            </ul>
          </div>
          <div class="col-md-3">
            <ul>
              <li>test</li>
              <li>test</li>
              <li>test</li>
              <li>test</li>
              <li>test</li>
            </ul>
          </div>
          <div class="col-md-3">
            <ul>
              <li>test</li>
              <li>test</li>
              <li>test</li>
              <li>test</li>
              <li>test</li>
            </ul>
          </div>
        </div>
      </div>
    </li>
    <li class="drop-down">
      <a href="#">Home</a>
      <div class="mega-menu fadeIn animated">
        <div class="row">
          <div class="col-md-3">
            <ul>
              <li>test</li>
              <li>test</li>
              <li>test</li>
              <li>test</li>
              <li>test</li>
            </ul>
          </div>
          <div class="col-md-3">
            <ul>
              <li>test</li>
              <li>test</li>
              <li>test</li>
              <li>test</li>
              <li>test</li>
            </ul>
          </div>
          <div class="col-md-3">
            <ul>
              <li>test</li>
              <li>test</li>
              <li>test</li>
              <li>test</li>
              <li>test</li>
            </ul>
          </div>
          <div class="col-md-3">
            <ul>
              <li>test</li>
              <li>test</li>
              <li>test</li>
              <li>test</li>
              <li>test</li>
            </ul>
          </div>
        </div>
      </div>
    </li>
    <li class="drop-down">
      <a href="#">Home</a>
      <div class="mega-menu fadeIn animated">
        <div class="row">
          <div class="col-md-3">
            <ul>
              <li>gaagag</li>
              <li>test</li>
              <li>test</li>
              <li>test</li>
              <li>test</li>
            </ul>
          </div>
          <div class="col-md-3">
            <ul>
              <li>test</li>
              <li>test</li>
              <li>test</li>
              <li>test</li>
              <li>test</li>
            </ul>
          </div>
          <div class="col-md-3">
            <ul>
              <li>test</li>
              <li>test</li>
              <li>test</li>
              <li>test</li>
              <li>test</li>
            </ul>
          </div>
          <div class="col-md-3">
            <ul>
              <li>test</li>
              <li>test</li>
              <li>test</li>
              <li>test</li>
              <li>test</li>
            </ul>
          </div>
        </div>
      </div>
    </li>
  </ul>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;