Question

我尝试调整我在网上找到的解决方案。它适用于该示例。但是，根据我的适应性，它不起作用。我希望有人可以帮助我。

在我发现的示例中 - 可以单击li元素然后打开下一个ul（子菜单）。如果我点击同一级别的li元素（如果它还有子导航点），那么它会显示ul并关闭之前打开的ul。等等。在我的变体中，我尝试调整示例 - 我点击加号（a href =＆＃34;＃＆＃34;），就像在js脚本中一样，然后我看不到与示例中相同的效果

我发现的例子：

http://jsfiddle.net/jtbowden/WGVum/

我的适应性尝试是：

＆＃13;

$(function() {
    $('#resMenu').on('click', 'a[href="#"]', function() {
        $('#resMenu ul').hide();
        var submenu = $(this).next('ul');
        submenu.parentsUntil('#resMenu').andSelf().show();
    });
});

＆＃13;

.topResponsive {
    height: 50px;
    line-height: 50px;
}
/* MAINMENU */
 nav {
    font-size: 14px;
    border: 1px solid #FFFFFF;
}
nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
nav ul li {
    border-bottom: 1px solid #FFFFFF;
    text-transform: uppercase;
    background-color: #e6bfc4;
    display: block;
    line-height: 50px;
}
nav ul li a {
    padding: 10px;
    color: #FFFFFF;
}
nav ul li a .active {
    color: #000000;
}
nav ul li ul {
    display:none;
    padding: 0;
    margin: 0;
}
nav ul li ul li {
    border-bottom: none;
    border-top: 1px solid #707173;
    background-color: #FFFFFF;
}
nav ul li ul li a {
    color: #707173;
    text-shadow: none;
}
nav ul li ul li a .active {
    color: #000000;
}
nav ul li ul li ul {
    padding: 0;
    margin: 0;
}
nav ul li ul li ul li {
    line-height: 50px;
    border-bottom: none;
    border-top: 1px solid #707173;
    background-color: #e4e4e4;
}
nav ul li ul li ul li a {
    font-size: 12px;
    padding: 5px 10px;
    color: #707173;
    text-shadow: none;
}
nav ul li ul li ul li a .active {
    color: #000000;
}
span.navPlus {
    background-color: #ddaeb5;
    border-left: 1px solid #FFFFFF;
    display: block;
    float: right;
    width: 50px;
    height: 50px;
}
span.navPlus a {
    padding: 0;
}
span.navMinus {
    background-color: #ddaeb5;
    border-left: 1px solid #FFFFFF;
    display: block;
    float: right;
    width: 50px;
    height: 50px;
}
span.navPlusGrau {
    background-color: #FFFFFF;
    border-left: 1px solid #707173;
    display: block;
    float: right;
    width: 50px;
    height: 50px;
}
span.navPlusGrau a {
    padding: 0;
}
span.navMinusGrau {
    background-color: #FFFFFF;
    border-left: 1px solid #707173;
    display: block;
    float: right;
    width: 50px;
    height: 50px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="responsiveMenu">
    <div>
        <nav id="resMenu">
            <div class="topResponsive"> <a href="#" class="close-panel"><img src="http://web523.login-9.loginserver.ch/website/fileadmin/System/Resources/Public/Images/close.png" width="15"></a>
            </div>
            <ul>
                <li> <span class="navPlus"><a href="#"><img src="http://web523.login-9.loginserver.ch/website/fileadmin/System/Resources/Public/Images/plusRosa.png"></a></span><a href="/index.php?id=2" title="Pflege-Produkte">Pflege-Produkte</a>

                    <ul>
                        <li><span class="navPlusGrau"><a href="#"><img src="http://web523.login-9.loginserver.ch/website/fileadmin/System/Resources/Public/Images/plusGrau.png"></a></span><a href="/index.php?id=6" title="Gesichtspflege">Gesichtspflege</a>

                            <ul>
                                <li><a href="/index.php?id=21" title="Unreine Haut, fettige Haut">Unreine Haut, fettige Haut</a>

                                </li>
                                <li><a href="/index.php?id=22" title="Mischhaut">Mischhaut</a>

                                </li>
                                <li><a href="/index.php?id=23" title="Normale bis trockene Haut">Normale bis trockene Haut</a>

                                </li>
                                <li><a href="/index.php?id=24" title="Trockene Haut">Trockene Haut</a>

                                </li>
                            </ul>
                        </li>
                        <li><a href="/index.php?id=7" title="Reinigung">Reinigung</a>

                        </li>
                        <li><a href="/index.php?id=8" title="Tagespflege">Tagespflege</a>

                        </li>
                        <li><a href="/index.php?id=9" title="Nachtpflege">Nachtpflege</a>

                        </li>
                        <li><a href="/index.php?id=10" title="Augenpflege">Augenpflege</a>

                        </li>
                        <li><a href="/index.php?id=11" title="Anti-Ageing-Pflege">Anti-Ageing-Pflege</a>

                        </li>
                        <li><a href="/index.php?id=12" title="Lippenpflege">Lippenpflege</a>

                        </li>
                        <li><a href="/index.php?id=13" title="Handpflege">Handpflege</a>

                        </li>
                        <li><span class="navPlusGrau"><a href="#"><img src="http://web523.login-9.loginserver.ch/website/fileadmin/System/Resources/Public/Images/plusGrau.png"></a></span><a href="/index.php?id=14" title="Körperpflege">Körperpflege</a>

                            <ul>
                                <li><a href="/index.php?id=25" title="Empfindliche Haut">Empfindliche Haut</a>

                                </li>
                                <li><a href="/index.php?id=26" title="Trockene Haut bis sehr trockene Haut">Trockene Haut bis sehr trockene Haut</a>

                                </li>
                                <li><a href="/index.php?id=27" title="Trockene Haut">Trockene Haut</a>

                                </li>
                            </ul>
                        </li>
                        <li><a href="/index.php?id=15" title="Haarpflege">Haarpflege</a>

                        </li>
                        <li><a href="/index.php?id=16" title="Fusspflege">Fusspflege</a>

                        </li>
                        <li><a href="/index.php?id=17" title="Deodorants">Deodorants</a>

                        </li>
                        <li><span class="navPlusGrau"><a href="#"><img src="http://web523.login-9.loginserver.ch/website/fileadmin/System/Resources/Public/Images/plusGrau.png"></a></span><a href="/index.php?id=18" title="Spezialpflege">Spezialpflege</a>

                            <ul>
                                <li><a href="/index.php?id=28" title="Sehr trockene Haut">Sehr trockene Haut</a>

                                </li>
                                <li><a href="/index.php?id=29" title="Unreine Haut">Unreine Haut</a>

                                </li>
                            </ul>
                        </li>
                        <li><span class="navPlusGrau"><a href="#"><img src="http://web523.login-9.loginserver.ch/website/fileadmin/System/Resources/Public/Images/plusGrau.png"></a></span><a href="/index.php?id=19" title="Sonnenschutz">Sonnenschutz</a>

                            <ul>
                                <li><a href="/index.php?id=30" title="Sonnenschutz">Sonnenschutz</a>

                                </li>
                                <li><a href="/index.php?id=31" title="Selftan">Selftan</a>

                                </li>
                                <li><a href="/index.php?id=32" title="Hautschutz für Kinder">Hautschutz für Kinder</a>

                                </li>
                            </ul>
                        </li>
                        <li><a href="/index.php?id=20" title="Erkrankte Haut">Erkrankte Haut</a>

                        </li>
                    </ul>
                </li>
                <li><span class="navPlus"><a href="#"><img src="http://web523.login-9.loginserver.ch/website/fileadmin/System/Resources/Public/Images/plusRosa.png"></a></span><a href="/index.php?id=3" title="Ihre Haut">Ihre Haut</a>

                    <ul>
                        <li><span class="navPlusGrau"><a href="#"><img src="http://web523.login-9.loginserver.ch/website/fileadmin/System/Resources/Public/Images/plusGrau.png"></a></span><a href="/index.php?id=33" title="Pflege nach Hauttyp">Pflege nach Hauttyp</a>

                            <ul>
                                <li><a href="/index.php?id=38" title="Unreine Haut, fettige Haut">Unreine Haut, fettige Haut</a>

                                </li>
                                <li><a href="/index.php?id=39" title="Mischhaut">Mischhaut</a>

                                </li>
                                <li><a href="/index.php?id=40" title="Normale bis trockene Haut">Normale bis trockene Haut</a>

                                </li>
                                <li><a href="/index.php?id=42" title="Trockene Haut">Trockene Haut</a>

                                </li>
                            </ul>
                        </li>
                        <li><a href="/index.php?id=34" title="Erkrankte Haut">Erkrankte Haut</a>

                        </li>
                        <li><a href="/index.php?id=35" title="Häufig gestellte Fragen">Häufig gestellte Fragen</a>

                        </li>
                        <li><a href="/index.php?id=36" title="Ihre Fragen an den Dermatologen">Ihre Fragen an den Dermatologen</a>

                        </li>
                        <li><a href="/index.php?id=37" title="Beratung in der Apotheke">Beratung in der Apotheke</a>

                        </li>
                    </ul>
                </li>
                <li><span class="navPlus"><a href="#"><img src="http://web523.login-9.loginserver.ch/website/fileadmin/System/Resources/Public/Images/plusRosa.png"></a></span><a href="/index.php?id=4" title="Louis Widmer">Louis Widmer</a>

                    <ul>
                        <li><a href="/index.php?id=43" title="Vier Grundsätze">Vier Grundsätze</a>

                        </li>
                        <li><a href="/index.php?id=44" title="Porträt">Porträt</a>

                        </li>
                        <li><a href="/index.php?id=45" title="Imagefilm">Imagefilm</a>

                        </li>
                        <li><a href="/index.php?id=46" title="Botschafterin">Botschafterin</a>

                        </li>
                        <li><a href="/index.php?id=47" title="International">International</a>

                        </li>
                        <li><a href="/index.php?id=48" title="Apotheken mit Louis Widmer Produkten">Apotheken mit Louis Widmer Produkten</a>

                        </li>
                        <li><a href="/index.php?id=49" title="Mediencenter">Mediencenter</a>

                        </li>
                        <li><a href="/index.php?id=50" title="Jobs">Jobs</a>

                        </li>
                        <li><a href="/index.php?id=51" title="Downloads">Downloads</a>

                        </li>
                        <li><a href="/index.php?id=52" title="Links">Links</a>

                        </li>
                    </ul>
                </li>
                <li><span class="navPlus"><a href="#"><img src="http://web523.login-9.loginserver.ch/website/fileadmin/System/Resources/Public/Images/plusRosa.png"></a></span><a href="/index.php?id=5" title="Info Center">Info Center</a>

                    <ul>
                        <li><a href="/index.php?id=53" title="Kundendienst">Kundendienst</a>

                        </li>
                        <li><a href="/index.php?id=54" title="Aktuelle Promotionen">Aktuelle Promotionen</a>

                        </li>
                        <li><a href="/index.php?id=55" title="Newsletter">Newsletter</a>

                        </li>
                        <li><a href="/index.php?id=56" title="Downloads">Downloads</a>

                        </li>
                        <li><a href="/index.php?id=57" title="Wettbewerb">Wettbewerb</a>

                        </li>
                        <li><a href="/index.php?id=58" title="Betriebsführung">Betriebsführung</a>

                        </li>
                        <li><a href="/index.php?id=59" title="Produkt beurteilen">Produkt beurteilen</a>

                        </li>
                        <li><a href="/index.php?id=60" title="Produktmuster bestellen">Produktmuster bestellen</a>

                        </li>
                        <li><a href="/index.php?id=61" title="Mitteilung">Mitteilung</a>

                        </li>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>
</div>

＆＃13;

如果有人可以帮助我，那就太棒了。

谢谢

Answer 1

我找到了自己的解决方案。这是我解决它的方式，使用的代码比不同的插件少得多。

$(document).ready(function(){
    $('a.expand').click(function() {
        $(this.parentNode).children('ul').toggleClass('navShow');
        $(this).toggleClass('redDisOut');
    });
});

nav {
  font-size: 14px;
  border: 1px solid #FFFFFF; }
  nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
    nav ul li {
      border-bottom: 1px solid #FFFFFF;
      text-transform: uppercase;
      background-color: #e6bfc4;
      line-height: 50px; }
      nav ul li a {
        color: #FFFFFF;
        display: inline-block;
        padding-left: 20px; }
        nav ul li a.redDis {
          background-image: url(../images/plusRosa.png);
          border-left: 1px solid #FFFFFF;
          display: block;
          float: right;
          width: 50px;
          height: 50px;
          padding-left: 0; }
        nav ul li a.redDisOut {
          background-image: url(../images/minusRosa.png);
          border-left: 1px solid #FFFFFF;
          display: inline-block;
          width: 50px;
          height: 50px;
          padding-left: 0; }
    nav ul ul {
      display: none;
      padding: 0;
      margin: 0; }
      nav ul ul li {
        border-bottom: none;
        border-top: 1px solid #707173;
        background-color: #FFFFFF; }
        nav ul ul li a {
          color: #707173;
          text-shadow: none;
          padding-left: 20px; }
          nav ul ul li a.redDis {
            background-image: url(../images/plusGrau.png);
            border-left: 1px solid #707173;
            display: block;
            float: right;
            width: 50px;
            height: 50px; }
          nav ul ul li a.redDisOut {
            background-image: url(../images/minusGrau.png);
            border-left: 1px solid #707173;
            display: block;
            float: right;
            width: 50px;
            height: 50px; }
        nav ul ul li ul {
          display: none;
          padding: 0;
          margin: 0; }
          nav ul ul li ul li {
            line-height: 50px;
            border-bottom: none;
            border-top: 1px solid #707173;
            background-color: #e4e4e4; }
            nav ul ul li ul li a {
              padding-left: 20px;
              color: #707173;
              text-shadow: none; }

.navHide {
  display: none; }

.navShow {
  display: block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
        <ul>
            <li><a>Menu I</a></li>
            <li><a>Menu II</a></li>
            <li><a>Menu III</a><a class="expand redDis">X</a>
                <ul class="navHide">
                    <li><a>Submenu 1</a></li>
                    <li><a>Submenu 2</a></li>
                    <li><a>Submenu 3</a><a class="expand redDis">X</a>
                        <ul class="navHide">
                            <li><a>Submenu 3a</a></li>
                            <li><a>Submenu 3b</a></li>
                            <li><a>Submenu 3c</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a>Menu IV</a></li>
            <li><a>Menu V</a><a class="expand redDis">X</a>
                <ul class="navHide">
                    <li><a>Submenu 1</a></li>
                    <li><a>Submenu 2</a></li>
                    <li><a>Submenu 3</a><a class="expand redDis">X</a>
                        <ul class="navHide">
                            <li><a>Submenu 3a</a></li>
                            <li><a>Submenu 3b</a></li>
                            <li><a>Submenu 3c</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>

$(document).ready(function() {
$('a.expand').click(function() {
    $(this.parentNode).children('ul').toggleClass('navShow');
    $(this).toggleClass('redDisOut');
    });
});

我希望我的回答很有帮助。下次见。

jQuery垂直导航

1 个答案: