скрыть элемент при отображении другого - PullRequest
Новая
       0

скрыть элемент при отображении другого

0 голосов
/ 21 июня 2020

Как я могу закрыть элемент (.sub-menu), когда другой открыт?

Это мой код 

 $('.menu-item-has-children > a').attr('aria-expanded', false);
  var click_item = function () {
      $('.menu-item-has-children > a').on('click', function(){
          var EltToToggle = $(this).next('.sub-menu');

          if ($(this).attr('href') === "#") {
              event.preventDefault();
          }

          if ($(this).attr('aria-expanded') === "true") {
              $(this).attr('aria-expanded', false);
              $(this).removeClass('is-opened');
              EltToToggle.removeClass('show');
          } else {
              $(this).attr('aria-expanded', true);
              $(this).addClass('is-opened');
              EltToToggle.addClass('show');
          }
      });
  }
  click_item();

  $(document).mouseup(function(e) {
    var sub_menu = $(".sub-menu");
    var except_body = $(".menu");

    // If the target of the click isn't the sub_menu
    if (!except_body.is(e.target) && except_body.has(e.target).length === 0) {
      sub_menu.removeClass('show');
      $(".menu-item-has-children > a").attr('aria-expanded', false);
      $(".menu-item-has-children > a").removeClass('is-opened');
      // click_item();
      console.log("ok")
      }
  });
.menu {
  display: flex;
}

li {
  margin: 10px;
}
.menu-item-has-children {
    position: relative;
}
.sub-menu {
  display: none;
  position: absolute;
  top: auto;
  left: 100%;
  -webkit-transform: translate(-50%, 2rem);
  transform: translate(-50%, 2rem);
  padding: 1rem 0;
  background-color: #fff;
  border-radius: .6rem;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, .1);
}

.show {
  display: block!important;
}
.menu-item-has-children>a {
position: relative
}

.menu-item-has-children>a:after {
    top: 2rem;
    right: 1.5rem;
}

.menu-item-has-children>a:after {
    content: "\f077";
    font-family: FontAwesome!important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-size: inherit;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-alt: "";
    speak: none;
    right: 1.6rem;
    top: 2.3rem;
    font-size: 1rem;
    transition: -webkit-transform .25s ease;
    transition: transform .25s ease;
    transition: transform .25s ease,-webkit-transform .25s ease;
}
.menu-item-has-children>a:after {
    top: 2rem;
    right: 1.5rem;
}
 .menu-item-has-children>a[aria-expanded=true]:after {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
.sub-menu a {
  color: white; 
 }
.sub-menu.one {
  background: teal;
  width: 300px;
}
.sub-menu.two {
  background: purple; 
  width: 300px;
  
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="menu">

  <li class="menu-item menu-item-has-children">
    <a href="#" aria-expanded="false" class="">
                               Item 1
           </a>

    <ul class="sub-menu one">
      <li class="menu-item">
        <a href="#" aria-current="page">
                                [Current] Lvl2. Children 1
            </a>

      </li>
      <li class="menu-item">
        <a href="#">
                                Lvl2. Children 2 with long text lorem ipsum
            </a>

      </li>
      <li class="menu-item menu-item-has-children">
        <a href="#" aria-expanded="false">
                                Link 2
            </a>

        <ul class="sub-menu">
          <li class="menu-item">
            <a href="#">
                                Lvl3. Children 1
            </a>

          </li>
          <li class="menu-item">
            <a href="#" aria-current="page">
                                [Current] Lvl3. Children 2 with long text lorem ipsum
            </a>

          </li>
          <li class="menu-item">
            <a href="#" target="_blank" class="external-link">
                                [_blank] Lvl3. Children 3
            <span class="icon-link-external" aria-hidden="true"></span></a>

          </li>
        </ul>
      </li>
      <li class="menu-item">
        <a href="#" target="_blank" class="external-link">
                                [_blank] Lvl2. Children 4
            <span class="icon-link-external" aria-hidden="true"></span></a>

      </li>
    </ul>
  </li>
  <li class="menu-item menu-item-has-children">
    <a href="#" aria-expanded="false" class="">
                                Link 2
         </a>

    <ul class="sub-menu two">
      <li class="menu-item">
        <a href="#" aria-current="page">
                                [Current] Lvl2. Children 1
            </a>

      </li>
      <li class="menu-item">
        <a href="#">
                                Lvl2. Children 2 with long text lorem ipsum
            </a>

      </li>
      <li class="menu-item menu-item-has-children">
        <a href="#" aria-expanded="false">
                                Lvl2. Children 3 with children
            </a>

        <ul class="sub-menu">
          <li class="menu-item">
            <a href="#">
                                Lvl3. Children 1
            </a>

          </li>
          <li class="menu-item">
            <a href="#" aria-current="page">
                                [Current] Lvl3. Children 2 with long text lorem ipsum
            </a>

          </li>
          <li class="menu-item">
            <a href="#" target="_blank" class="external-link">
                                [_blank] Lvl3. Children 3
            <span class="icon-link-external" aria-hidden="true"></span></a>

          </li>
        </ul>
      </li>
      <li class="menu-item">
        <a href="#" target="_blank" class="external-link">
                                [_blank] Lvl2. Children 4
            <span class="icon-link-external" aria-hidden="true"></span></a>

      </li>
    </ul>
  </li>



</ul>

когда я нажимаю на ссылку ('.menu-item-has-children> a'), я хочу показать соответствующий элемент (. подменю), и когда я нажимаю на другое (.sub-menu), я хочу показать его и скрыть другое (БЕЗ ИЗМЕНЕНИЯ HTML КОД, ТОЛЬКО JS)

Ответы [ 3 ]

1 голос
/ 21 июня 2020

Вы можете сбросить все настройки внутри блока else. 

$('.menu-item-has-children > a').attr('aria-expanded', false);
  var click_item = function () {
      $('.menu-item-has-children > a').on('click', function(){
          var EltToToggle = $(this).next('.sub-menu');

          if ($(this).attr('href') === "#") {
              event.preventDefault();
          }

          if ($(this).attr('aria-expanded') === "true") {
              $(this).attr('aria-expanded', false);
              $(this).removeClass('is-opened');
              EltToToggle.removeClass('show');
          } else {
              //Reset all
              $('.menu-item-has-children > a').attr('aria-expanded', false)
              $('.menu-item-has-children > a').removeClass('is-opened')
              $('.menu-item-has-children > a').next('.sub-menu').removeClass('show');
              
              $(this).attr('aria-expanded', true);
              $(this).addClass('is-opened');
              EltToToggle.addClass('show');
          }


      });
  }
  click_item();

  $(document).mouseup(function(e) {
    var sub_menu = $(".sub-menu");
    var except_body = $(".menu");

    // If the target of the click isn't the sub_menu
    if (!except_body.is(e.target) && except_body.has(e.target).length === 0) {
      sub_menu.removeClass('show');
      $(".menu-item-has-children > a").attr('aria-expanded', false);
      $(".menu-item-has-children > a").removeClass('is-opened');
      // click_item();
      console.log("ok")
      }
  });
.menu {
  display: flex;
}

li {
  margin: 10px;
}
.menu-item-has-children {
    position: relative;
}
.sub-menu {
  display: none;
  position: absolute;
  top: auto;
  left: 100%;
  -webkit-transform: translate(-50%, 2rem);
  transform: translate(-50%, 2rem);
  padding: 1rem 0;
  background-color: #fff;
  border-radius: .6rem;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, .1);
}

.show {
  display: block!important;
}
.menu-item-has-children>a {
position: relative
}

.menu-item-has-children>a:after {
    top: 2rem;
    right: 1.5rem;
}

.menu-item-has-children>a:after {
    content: "\f077";
    font-family: FontAwesome!important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-size: inherit;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-alt: "";
    speak: none;
    right: 1.6rem;
    top: 2.3rem;
    font-size: 1rem;
    transition: -webkit-transform .25s ease;
    transition: transform .25s ease;
    transition: transform .25s ease,-webkit-transform .25s ease;
}
.menu-item-has-children>a:after {
    top: 2rem;
    right: 1.5rem;
}
 .menu-item-has-children>a[aria-expanded=true]:after {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
.sub-menu a {
  color: white; 
 }
.sub-menu.one {
  background: teal;
  width: 300px;
}
.sub-menu.two {
  background: purple; 
  width: 300px;
  
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="menu">

  <li class="menu-item menu-item-has-children">
    <a href="#" aria-expanded="false" class="">
                               Item 1
           </a>

    <ul class="sub-menu one">
      <li class="menu-item">
        <a href="#" aria-current="page">
                                [Current] Lvl2. Children 1
            </a>

      </li>
      <li class="menu-item">
        <a href="#">
                                Lvl2. Children 2 with long text lorem ipsum
            </a>

      </li>
      <li class="menu-item menu-item-has-children">
        <a href="#" aria-expanded="false">
                                Link 2
            </a>

        <ul class="sub-menu">
          <li class="menu-item">
            <a href="#">
                                Lvl3. Children 1
            </a>

          </li>
          <li class="menu-item">
            <a href="#" aria-current="page">
                                [Current] Lvl3. Children 2 with long text lorem ipsum
            </a>

          </li>
          <li class="menu-item">
            <a href="#" target="_blank" class="external-link">
                                [_blank] Lvl3. Children 3
            <span class="icon-link-external" aria-hidden="true"></span></a>

          </li>
        </ul>
      </li>
      <li class="menu-item">
        <a href="#" target="_blank" class="external-link">
                                [_blank] Lvl2. Children 4
            <span class="icon-link-external" aria-hidden="true"></span></a>

      </li>
    </ul>
  </li>
  <li class="menu-item menu-item-has-children">
    <a href="#" aria-expanded="false" class="">
                                Link 2
         </a>

    <ul class="sub-menu two">
      <li class="menu-item">
        <a href="#" aria-current="page">
                                [Current] Lvl2. Children 1
            </a>

      </li>
      <li class="menu-item">
        <a href="#">
                                Lvl2. Children 2 with long text lorem ipsum
            </a>

      </li>
      <li class="menu-item menu-item-has-children">
        <a href="#" aria-expanded="false">
                                Lvl2. Children 3 with children
            </a>

        <ul class="sub-menu">
          <li class="menu-item">
            <a href="#">
                                Lvl3. Children 1
            </a>

          </li>
          <li class="menu-item">
            <a href="#" aria-current="page">
                                [Current] Lvl3. Children 2 with long text lorem ipsum
            </a>

          </li>
          <li class="menu-item">
            <a href="#" target="_blank" class="external-link">
                                [_blank] Lvl3. Children 3
            <span class="icon-link-external" aria-hidden="true"></span></a>

          </li>
        </ul>
      </li>
      <li class="menu-item">
        <a href="#" target="_blank" class="external-link">
                                [_blank] Lvl2. Children 4
            <span class="icon-link-external" aria-hidden="true"></span></a>

      </li>
    </ul>
  </li>



</ul>
0 голосов
/ 21 июня 2020

$('.menu-item-has-children > a').attr('aria-expanded', false); вызовите это, а также я вижу, что вы используете этот класс is-opened, поэтому всякий раз, когда вызывается элемент щелчка в списке, вызывайте указанную выше функцию и удаляйте класс из DOM, чтобы другие открытые списки закрывались, а затем вызывали это на текущем, чтобы он открылся.

или используя jquery, вы можете вызвать изменение свойства стиля, чтобы не отображать его.

0 голосов
/ 21 июня 2020

Лучший подход - скрыть все элементы, а затем показать только нужную ветку дерева.

Чтобы показать ветку только go по всем элементам, от одного щелчка до root одного.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...