Закройте все открытые ul, когда другая ul переключается событием click

Question

У меня есть вертикальное раскрывающееся меню, для которого я использую jQuery для открытия/закрытия подменю. Он работает нормально, когда пользователь нажимает на родительский элемент (например, «О» подменю открывается, и когда они снова нажимают на него, подменю снова закрывается. Однако, если они не нажимают на родительский элемент («О») второй раз чтобы закрыть его, но нажмите на другой родительский элемент (скажем, «Промышленность»), чтобы открыть подменю, как подменю («О», так и «Промышленность») выглядят вискозимо. Поэтому мне нужно, чтобы он работал, что «О» автоматически закрывается, Промышленность»щелкают Вот код:.

<nav> 
<ul id="nav-list"> 
    <li class="nav-list_item nav-about><a href="#">About</a> 
     <div id="about-drop"> 
      <ul> 
       <li>...</li> 
       <li>...</li> 
       <li>...</li> 
      </ul> 
     </div> 
    </li> 

    <li class="nav-list_item nav-industry"><a href="#">Industry</a> 
     <div id="industry-drop"> 
      <ul> 
       <li>...</li> 
       <li>...</li> 
       <li>...</li> 
      </ul> 
     </div> 
    </li> 
    <li class="nav-list_item nav-application"><a href="#">Application</a> 
     <div id="application-drop"> 
      <ul> 
       <li>...</li> 
       <li>...</li> 
       <li>...</li> 
      </ul> 
     </div> 
    </li> 
</ul> 

И JavaScript:

$('li.nav-about').click(function() { 
     $(this).find('ul').toggle(); 
    }); 

    $(' li.nav-industry').click(function() { 
     $("html, body").animate({ scrollTop: 0 }, "fast"); 
     $(this).find('ul').toggle(); 
    }); 
$('li.nav-application').click(function() { 
     $("html, body").animate({ scrollTop: 0 }, "fast"); 
     $(this).find('ul').toggle(); 
    }); 

Я пробовал разные вещи, которые я нашел в stackoverflow уже, но не мог заставить его работать. Какие-либо предложения?

Answer 1

demo

$('li.nav-about').click(function() { 
    $(this).find('ul').toggle(); 
    $(this).siblings('li').find('ul').hide(); 
}); 

$(' li.nav-industry').click(function() { 
    $("html, body").animate({ 
     scrollTop: 0 
    }, "fast"); 
    $(this).find('ul').toggle(); 
    $(this).siblings('li').find('ul').hide(); 
}); 
$('li.nav-application').click(function() { 
    $("html, body").animate({ 
     scrollTop: 0 
    }, "fast"); 
    $(this).find('ul').toggle(); 
    $(this).siblings('li').find('ul').hide(); 
}); 

Просто скрыть другой DIV, когда один щелчок.

Answer 2

Я думаю, что вы можете удалить избыточный код, как это:

$('li.nav-list_item').click(function() { 
    $('li.nav-list_item').find('ul').hide(); 
    $("html, body").animate({ scrollTop: 0 }, "fast"); 
    $(this).find('ul').toggle(); 
}); 

Вы можете заменить ваши JS с этим.

Answer 3

$('#nav-list li').on('click', function() { 
 
    $('#nav-list li').not(this).find('div').hide(); 
 
    $(this).find('div').toggle(); 
 
});

.nav-list_item > div { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="nav-list"> 
 
    <li class="nav-list_item nav-about"><a href="#">About</a> 
 
    <div id="about-drop "> 
 
     <ul> 
 
     <li>...</li> 
 
     <li>...</li> 
 
     <li>...</li> 
 
     </ul> 
 
    </div> 
 
    </li> 
 

 
    <li class="nav-list_item nav-industry"><a href="#">Industry</a> 
 
    <div id="industry-drop "> 
 
     <ul> 
 
     <li>...</li> 
 
     <li>...</li> 
 
     <li>...</li> 
 
     </ul> 
 
    </div> 
 
    </li> 
 
    <li class="nav-list_item nav-application"><a href="#">Application</a> 
 
    <div id="application-drop "> 
 
     <ul> 
 
     <li>...</li> 
 
     <li>...</li> 
 
     <li>...</li> 
 
     </ul> 
 
    </div> 
 
    </li> 
 
</ul>

Нет необходимости в столь запутанных обработчиков.