子菜单崩溃而不是飞越下拉列表

时间：2017-03-29 20:31:37

标签： javascript jquery css

我正在尝试将崩溃的功能添加到我的子菜单中，但还没有骰子。我已经研究了几种解决方案，到目前为止还没有任何工作。

问题是在桌面上菜单有一个功能（它打开到侧面），而在移动设备上则假设它像下拉一样。

以下是一些图片，可以帮助我传达我在移动设备上要做的事情：

第一个菜单表现正常。我希望像下拉菜单一样

enter image description here

第二个菜单（绿色），我想像崩溃一样打开，显示其子菜单，但仍然显示下面的蓝色菜单剩余项目 enter image description here

**喜欢这个**

enter image description here

这是一个小提琴，不确定您是否能够看到移动选项。任何帮助将不胜感激。

  $('ul.first-menu>li').click(function(event) {
    var li = $(this);
    var liOld = $('ul.active').parents("li");
    var el = (event.target || event.srcElement);

    $(el).find('span').toggleClass('arrow-down arrow-up');

    if($('ul.active').length!=0){
        $('ul.active').removeClass('active').slideUp('fast', function(){
          if(li.index() != liOld.index()){
             li.children('ul.submenu').slideDown(600).addClass('active');
          }
        });
    }
    else{
       $(this).children('ul.submenu').slideDown(600).addClass('active');
    }
  });

  if ( $(window).width() < 736) {
    var i;
    var $acc = $('.has-children');  
      $acc.click(function(event){
      event.stopPropagation();
      event.preventDefault();
      var el = (event.target || event.srcElement);
      console.log('clicked');
      $(this).find('ul.submenu').toggle();
       $(el).find('span').toggleClass('arrow-down arrow-up');
    });
  }
.bg-nav {
	width: 796px;
	display: flex;
	background-color: #323232;
}

.bg-nav ul {
	background-color: #323232;
  padding: 0;
  display: flex;
  align-items: stretch;
  flex-direction: column;
  margin-bottom: 0;
  width: 80%;
}

.bg-nav ul li {
	list-style-type: none;
	text-align: center;
	border-bottom: .5px solid #ccc;
}

.bg-nav ul li a {
	padding: .8rem 1rem;
	text-decoration: none;
	display: block;
	color: #fff;
	font-family: 'ArialMT', 'Arial';
	font-weight: 400;
	font-size: 13px;
}

.bg-nav ul li:hover {
	background-color: #2c3e50;
}

.bg-nav ul li a:hover {
	color: #fff;
}

.has-children ul, .has-children ul .has-children ul{
  display: none;
  width: 100%;
  position:absolute;
  background-color: #fff;
}

.has-children ul li a {
	color: #00A2CD;
}

.bg-nav .submenu {
	border: 1px solid #ccc;
}

.bg-nav .submenu li {
	text-align: left;
}

.bg-nav .submenu li:hover {
	background-color: #966ea2;
}

.bg-nav .first-submenu li a:hover,
.bg-nav .first-submenu li a:active,
.bg-nav .first-submenu li a:focus {
	color: #fff;
}

.bg-nav .arrow {
	font-family: FontAwesome;
	float: right;
}

.bg-nav .arrow-down::after {
	content: "\f107";
	font-size: 16px;
}

.bg-nav .arrow-up::after {
	content: "\f106";
	font-size: 16px;
}

.bg-nav .arrow-right::after {
	content: "\f105";
	font-size: 16px;
}




@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {

	.bg-nav {
		justify-content: flex-start;
		width: 100%;
		margin-top: 35px;
	}

	.bg-nav ul {
		width: 100%;
	}

	.bg-nav ul li {
		text-align: left;
		border-bottom: .5px solid #ccc;
	}

	.bg-nav .has-children ul li a {
		padding-left: 25px;
	}

	.bg-nav .has-children ul .has-children ul {
		display: none;
	}

	.bg-nav .first-submenu {
		width: 90%;
		margin-left: 5%;
	}


}

@media only screen and (min-device-width : 736px) {

	.bg-nav {
		align-items: stretch;
		justify-content: center;
		height: 36px;
	}

	.bg-nav .has-children ul li a {
		padding-left: 15px;
	}

	.bg-nav ul {
	  flex-direction: row;
	  justify-content: center;
	}

	.bg-nav ul li {
		position: relative;
		flex: 1 0;
		border-left: .5px solid #ccc;

	}

	.bg-nav ul li:last-of-type {
		border-right: .5px solid #ccc;
	}

	.bg-nav .submenu li,
	.bg-nav .submenu li:last-of-type {
		border-left: none;
		border-right: none;
	}


  .bg-nav .has-children ul .has-children ul{
    left:100%;
    top: 0;
  }

  .bg-nav .has-children ul {
  	display:flex;
	  flex-direction:column;
  }

	.bg-nav .has-children ul .has-children:hover ul{
	     display:flex;
	    flex-direction:column;
	}

	.bg-nav .submenu .arrow-down::after {
		content: "\f105";
		font-size: 16px;
	}

}



.bg-nav .has-children ul,
.submenu, .first-submenu {
    display: none;
}

.arrow {
	pointer-events: none;
}

.has-children ul li {
	background-color: #f5f5f5;
}

.has-children ul {
	display: none;
}

.active {
	display: block;
}

.has-children ul li {
	background-color: lightblue;
}

.has-children ul li .second-submenu li {
	background-color: lightgreen;
}

/** {
	outline: 1px solid orange;
}*/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="bg-nav">
    <ul class="first-menu">
      <li class="has-children">
        <a href="#">Page 1
          <span class="arrow arrow-down"></span>
        </a>
        <ul class="submenu first-submenu">
          <li><a href="#">Menu 1</a></li>
          <li class="has-children">
            <a href="#">Menu 2
              <span class="arrow arrow-down"></span>
            </a>
            <ul class="submenu second-submenu">
              <li><a href="#">Sub Menu 1</a></li>
              <li><a href="#">Sub Menu 2</a></li>
              <li><a href="#">Sub Menu 3</a></li>
              <li><a href="#">Sub Menu 4</a></li>
              <li><a href="#">Sub Menu 5</a></li>
              <li><a href="#">Sub Menu 6</a></li>
              <li><a href="#">Sub Menu 7</a></li>
            </ul>
          </li>
          <li class="has-children">
            <a href="#">Menu3
              <span class="arrow arrow-down"></span>
            </a>
            <ul class="submenu second-submenu">
              <li><a href="#">Sub Menu 1</a></li>
              <li><a href="#">Sub Menu 2</a></li>
              <li><a href="#">Sub Menu 3</a></li>
              <li><a href="#">Sub Menu 4</a></li>
              <li><a href="#">Sub Menu 5</a></li>
              <li><a href="#">Sub Menu 6</a></li>
              <li><a href="#">Sub Menu 7</a></li>
            </ul>
          </li>
          <li class="has-children">
            <a href="#">Menu 4
              <span class="arrow arrow-down"></span>
            </a>
            <ul class="submenu second-submenu">
              <li><a href="#">Sub Menu 1</a></li>
              <li><a href="#">Sub Menu 2</a></li>
              <li><a href="#">Sub Menu 3</a></li>
              <li><a href="#">Sub Menu 4</a></li>
              <li><a href="#">Sub Menu 5</a></li>
              <li><a href="#">Sub Menu 6</a></li>
              <li><a href="#">Sub Menu 7</a></li>
            </ul>
          </li>
          <li class="has-children">
            <a href="#">Menu 5
              <span class="arrow arrow-down"></span>
            </a>
            <ul class="submenu second-submenu">
              <li><a href="#">Sub Menu 1</a></li>
              <li><a href="#">Sub Menu 2</a></li>
              <li><a href="#">Sub Menu 3</a></li>
              <li><a href="#">Sub Menu 4</a></li>
              <li><a href="#">Sub Menu 5</a></li>
              <li><a href="#">Sub Menu 6</a></li>
              <li><a href="#">Sub Menu 7</a></li>
            </ul>
          </li>
          <li class="has-children">
            <a href="#">Menu 6
              <span class="arrow arrow-down"></span>
            </a>
            <ul class="submenu second-submenu">
              <li><a href="#">Sub Menu 1</a></li>
              <li><a href="#">Sub Menu 2</a></li>
              <li><a href="#">Sub Menu 3</a></li>
              <li><a href="#">Sub Menu 4</a></li>
              <li><a href="#">Sub Menu 5</a></li>
              <li><a href="#">Sub Menu 6</a></li>
              <li><a href="#">Sub Menu 7</a></li>
            </ul>
          </li>
          <li class="has-children">
            <a href="#">Menu 7
              <span class="arrow arrow-down"></span>
            </a>
            </li>
          <li class="has-children">
            <a href="#">Menu 8
              <span class="arrow arrow-down"></span>
            </a>
            <ul class="submenu second-submenu">
              <li><a href="#">Sub Menu 1</a></li>
              <li><a href="#">Sub Menu 2</a></li>
              <li><a href="#">Sub Menu 3</a></li>
              <li><a href="#">Sub Menu 4</a></li>
              <li><a href="#">Sub Menu 5</a></li>
              <li><a href="#">Sub Menu 6</a></li>
              <li><a href="#">Sub Menu 7</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="has-children">
        <a href="#">Page 2
          <span class="arrow arrow-down"></span>
        </a>
        <ul class="submenu first-submenu">
          <li><a href="#">Menu 1</a></li>
          <li><a href="#">Menu 2</a></li>
          <li><a href="#">Menu 3</a></li>
          <li><a href="#">Menu 4</a></li>
          <li><a href="#">Menu 5</a></li>
          <li><a href="#">Menu 6</a></li>
          <li><a href="#">Menu 7</a></li>
        </ul>
      </li>
      <li class="has-children">
        <a href="#">Page 3
          <span class="arrow arrow-down"></span>
        </a>
        <ul class="submenu first-submenu" value="hide/show">
          <li><a href="#">Menu 1</a></li>
          <li><a href="#">Menu 2</a></li>
          <li><a href="#">Menu 3</a></li>
          <li><a href="#">Menu 4</a></li>
          <li><a href="#">Menu 5</a></li>
        </ul>
      </li>
      <li><a href="#">Page 4</a></li>
    </ul>   
  </div>

0 个答案:

没有答案
相关问题
最新问题