Два раскрывающихся меню, нажав - PullRequest
Новая
       14

Два раскрывающихся меню, нажав

0 голосов
/ 28 августа 2018

Как реализовать маскировку под меню пункта 1 при нажатии на пункт 4?

Я реализовал, добавив проверку: 

if ($('.arm-new-ext').children('ul').hasClass('show')) $('.arm-new-ext').click();

и 

if ($('.arm-ext').children('ul').hasClass('show')) $('.arm-ext').click();

Это правильное решение? Как бы вы это реализовали? 

.main-menu {
  
  
}

.main-menu li {
  list-style: outside none none;
  cursor: pointer;
  float: left;
}

.hide {
  display: none;
}

.show {
  display: block;
}

ul.menu {
  border: 1px solid #95958d;
  position: absolute;
  margin: 0;
  padding: 0;
}

ul.menu li {
  font: 14px Segoe UI, sans-serif;
  list-style: outside none none;
  position: static;
  line-height: 20px;
  text-align: left;
  clear: both;
  background: #faf8f5;
  padding: 2px 0px;
  white-space: nowrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
  $(function() {
    $('.arm-new-ext').click(function(e) {
      // My solution!
     // if ($('.arm-ext').children('ul').hasClass('show')) $('.arm-ext').click();

      if ($(this).children('ul').hasClass('show'))
        $(this).children('ul')
        .removeClass('show')
        .addClass('hide');
      else
        $(this).children('ul')
        .addClass('show')
        .removeClass('hide');

      if (e.stopPropagation) e.stopPropagation();
      if (e.preventDefault) e.preventDefault();
    });

    $('.arm-ext').click(function(e) {
      // My solution!
     // if ($('.arm-new-ext').children('ul').hasClass('show')) $('.arm-new-ext').click();

      if ($(this).children('ul').hasClass('show'))
        $(this).children('ul')
        .removeClass('show')
        .addClass('hide');
      else
        $(this).children('ul')
        .addClass('show')
        .removeClass('hide');

      if (e.stopPropagation) e.stopPropagation();
      if (e.preventDefault) e.preventDefault();
    });

    $('body').click(function() {
      if ($('.arm-new-ext').children('ul').hasClass('show'))
        $('.arm-new-ext').children('ul')
        .removeClass('show')
        .addClass('hide');

      if ($('.arm-ext').children('ul').hasClass('show'))
        $('.arm-ext').children('ul')
        .removeClass('show')
        .addClass('hide');
    })
  });
</script>
<body style="border:1px solid red">
<ul class="main-menu">
  <li class="arm-ext">
    <span>Пункт 1</span>
    <ul class="menu hide">
      <li>1</li>
      <li>2</li>
    </ul>
  </li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
  <li class="arm-new-ext">
    <span>Пункт 4</span>
    <ul class="menu hide">
      <li>1</li>
      <li>2</li>
    </ul>
  </li>
  <li>Пункт 5</li>
</ul>
</body>

1 Ответ

0 голосов
/ 28 августа 2018

Вы можете использовать toggleClass для достижения этой цели: 

var $menuHeader = $('.arm-new-ext,.arm-ext');
var $menuItems = $menuHeader.children('ul');
$menuHeader.click(function(e) {
    var $currentMenuItems = $(this).children('ul');
    $menuItems.not($currentMenuItems).removeClass('show').addClass('hide')
    $currentMenuItems.toggleClass('show hide');
});


.main-menu {
  
  
}

.main-menu li {
  list-style: outside none none;
  cursor: pointer;
  float: left;
}

.hide {
  display: none;
}

.show {
  display: block;
}

ul.menu {
  border: 1px solid #95958d;
  position: absolute;
  margin: 0;
  padding: 0;
}

ul.menu li {
  font: 14px Segoe UI, sans-serif;
  list-style: outside none none;
  position: static;
  line-height: 20px;
  text-align: left;
  clear: both;
  background: #faf8f5;
  padding: 2px 0px;
  white-space: nowrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
  $(function() {
    
var $menuHeader = $('.arm-new-ext,.arm-ext');
var $menuItems = $menuHeader.children('ul');
$menuHeader.click(function(e) {
   debugger
    var $currentMenuItems = $(this).children('ul');
    $menuItems.not($currentMenuItems).removeClass('show').addClass('hide')
    $currentMenuItems.toggleClass('show hide');
   

      if (e.stopPropagation) e.stopPropagation();
      if (e.preventDefault) e.preventDefault();
    });

    

    $('body').click(function() {
      if ($('.arm-new-ext').children('ul').hasClass('show'))
    $('.arm-new-ext').children('ul')
    .removeClass('show')
    .addClass('hide');

  if ($('.arm-ext').children('ul').hasClass('show'))
    $('.arm-ext').children('ul')
    .removeClass('show')
    .addClass('hide');
    })
  });
</script>
<body style="border:1px solid red">
<ul class="main-menu">
  <li class="arm-ext">
    <span>Пункт 1</span>
    <ul class="menu hide">
      <li>1</li>
      <li>2</li>
    </ul>
  </li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
  <li class="arm-new-ext">
    <span>Пункт 4</span>
    <ul class="menu hide">
      <li>1</li>
      <li>2</li>
    </ul>
  </li>
  <li>Пункт 5</li>
</ul>
</body>
...