Когда элемент включен в Меню 1 и меняется в Меню 2 он не оказывается включенным

Когда 1 выбирает меню, окажись подчеркнутым помечая, что выбран, но в выбирать меню 2, продолжает подчеркивать в меню 1.

Я пытался сделать так, чтобы он остался отборным, когда я кликаю в меню 2 с css(.selected:before) но я не понимаю, что происходит.

Это код, где видно различие, если они кликают в меню или в другом.

$('ul.menu-lateral .sub-menu').hide(); //Ocultar hijos de forma predeterminada
	
	$('ul.menu-lateral li a').click(function(){
			
	$(this).siblings('.sub-menu').slideToggle('slow');
			
});


$('ul.menu-lateral > li').click(function(){
  $('ul.menu-lateral > li').removeClass('selected');
  $(this).addClass('selected');
});
ul {
  list-style: none;
}

ul > li {
  margin: 30px;
}

ul > li.selected:before {
  content: '';
  position: absolute;
  left: 55px;
  right: 0;
  top: 45px;
  margin: 3px;
  height: 2px;
  background: #F39323;
  width: 100px;
}

ul > li > a {
  text-decoration: none;
  color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar-menu" role="navigation">
    <ul class="menu-lateral">
        <li><a href="#"> MENU 1 </a>
            <ul class="sub-menu">
                <li><a href="#"> SUB MENU 1</a></li>
            </ul>
        </li>

        <li><a href="#"> MENU 2 </a>
            <ul class="sub-menu">
                <li><a href="#">SUB MENU 2</a></li>
            </ul>
        </li>
    </ul>
</div>
1
задан 07.01.2017, 04:45
0 ответов

Хорошие!!

У тебя есть ошибка в твоем CSS, так как эти posicionando в absolute, что posiciona договора "самый близкий posicionado" это хочет сказать Вашего предка, что твоя стоимость left, top и т.д.... они начнут двигаться со стоимости DOM, так как у тебя нет какого-то предка posicionado, таким образом линия подчеркнутый эта одна на другой поэтому не видится, другое возможное решение состояло бы в том, чтобы использовать край bottom, чтобы подчеркивать активное меню

С другой стороны ты можешь использовать toggleClass в том же событии, чтобы разворачивать второстепенные меню и в то же время красить подчеркнутого главное меню, я предлагаю тебе следующее решение

$('ul.menu-lateral .sub-menu').hide(); //Ocultar hijos de forma predeterminada

$('ul.menu-lateral li').click(function(){
  $(this).children('.sub-menu').slideToggle('slow')
  $(this).children(':first').toggleClass('selected')
})
ul {
  list-style: none;
}

ul > li {
  margin: 30px;
}

.selected{
  border-bottom: 2px solid red;
}

ul > li > a {
  text-decoration: none;
  color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar-menu" role="navigation">
    <ul class="menu-lateral">
        <li class=""><a href="#"> MENU 1 </a>
            <ul class="sub-menu">
                <li><a href="#"> SUB MENU 1</a></li>
            </ul>
        </li>

        <li class=""><a href="#"> MENU 2 </a>
            <ul class="sub-menu">
                <li><a href="#">SUB MENU 2</a></li>
            </ul>
        </li>
    </ul>
</div>
1
ответ дан 03.12.2019, 17:51

Теги

Похожие вопросы