隐藏并显示列表中的元素

HIde and show elements from list

本文关键字：元素 列表 显示 隐藏      更新时间：2023-09-26

在屏幕加载时，我需要隐藏列表中除 li#active_language 之外的所有元素。

第二步是单击可见的 li#active_language 元素，这应该打开所有其他 li 元素。我尝试使用下面的代码，但它不起作用。

希望有人能帮忙。谢谢

$(document).ready(function(){
$( ".jflanguageselection li:not(#active_language)").hide();
$( "#active_language" ).click(function() {
$( ".jflanguageselection li:not(#active_language)").css("display","block";).show(10000);
});
});

这是 HTML 代码：

<ul class="jflanguageselection">
<li><a href="#"><img src="#" alt="English" title="English"></a></li>
<li id="active_language"><a href="#"><img src="#" alt="Deutsch" title="Deutsch"></a></li>
<li><a href="#"><img src="#" alt="Swedish" title="Swedish"></a></li>
<li><a href="#"><img src="#" alt="Serbian" title="Serbian"></a></li>
</ul>

在您的站点中，解决方案是：

$(function () {
  $('#jflanguageselection ul.jflanguageselection li:not("#active_language")').hide();
  $('#active_language').on('click', function(e) {
    e.preventDefault();
    $('#jflanguageselection ul.jflanguageselection li:not("#active_language")').toggle(1000);
  });
});
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<div id="jflanguageselection">
    <ul class="jflanguageselection">
        <li style="display: none;"><a href="http://www.crna-gora-apartmani.com/en/"><img
                src="http://www.crna-gora-apartmani.com/components/com_joomfish/images/flags/en.gif" alt="English"
                title="English"></a></li>
        <li style="display: none;"><a href="http://www.crna-gora-apartmani.com/sr/"><img
                src="http://www.crna-gora-apartmani.com/components/com_joomfish/images/flags/sr.gif" alt="Mne/Sr"
                title="Mne/Sr"></a></li>
        <li style="display: none;"><a href="http://www.crna-gora-apartmani.com/"><img
                src="http://www.crna-gora-apartmani.com/components/com_joomfish/images/flags/ru.gif" alt="Russian"
                title="Russian"></a></li>
        <li style="display: none;"><a href="http://www.crna-gora-apartmani.com/pl/"><img
                src="http://www.crna-gora-apartmani.com/components/com_joomfish/images/flags/pl.gif" alt="Polish"
                title="Polish"></a></li>
        <li style="display: none;"><a href="http://www.crna-gora-apartmani.com/ro/"><img
                src="http://www.crna-gora-apartmani.com/components/com_joomfish/images/flags/ro.gif" alt="Romanian"
                title="Romanian"></a></li>
        <li style="display: none;"><a href="http://www.crna-gora-apartmani.com/cz/"><img
                src="http://www.crna-gora-apartmani.com/components/com_joomfish/images/flags/cz.gif" alt="Czech"
                title="Czech"></a></li>
        <li id="active_language"><a href="http://www.crna-gora-apartmani.com/de/"><img
                src="http://www.crna-gora-apartmani.com/components/com_joomfish/images/flags/de.gif" alt="Deutsch"
                title="Deutsch"></a></li>
        <li style="display: none;"><a href="http://www.crna-gora-apartmani.com/it/"><img
                src="http://www.crna-gora-apartmani.com/components/com_joomfish/images/flags/it.gif" alt="Italian"
                title="Italian"></a></li>
        <li style="display: none;"><a href="http://www.crna-gora-apartmani.com/fr/"><img
                src="http://www.crna-gora-apartmani.com/components/com_joomfish/images/flags/fr.gif" alt="Francais"
                title="Francais"></a></li>
        <li style="display: none;"><a href="http://www.crna-gora-apartmani.com/se/"><img
                src="http://www.crna-gora-apartmani.com/components/com_joomfish/images/flags/se.gif" alt="Swedish"
                title="Swedish"></a></li>
        <li style="display: none;"><a href="http://www.crna-gora-apartmani.com/hu/"><img
                src="http://www.crna-gora-apartmani.com/components/com_joomfish/images/flags/hu.gif" alt="Magyar"
                title="Magyar"></a></li>
    </ul>
</div>

相关文章：