Stworzyłem menu z jQuery, problem polega na tym, że klikam podmenu; Witryna Odświeża, a następnie menu nie pozostaje aktywnym stanem, chcę, aby pokazać aktywne jego menu i podmenu po kliknięciu .. Stworzył również skrzypce http://jsfiddle.net/akshaydesai/ptghs8xo/

<ul class="menu">

<li><div><a href="#">PRODUCTS</a></div>
    <ul>
        <li><a href="#">Scada Software</a></li>
        <li><a href="#">Energy Monitoring</a></li>
        <li><a href="#">Tension Monitoring</a></li>
        <li><a href="#">Protocol Gateways</a></li>
        <li><a href="#">Gas Monitoring</a></li>
                            <li><a href="#">Led Display</a></li>
                        </ul>
                    </li>

                <li><div><a href="#">SOLUTIONS</a></div>
                        <ul>
                            <li><a href="#">Power & energy</a></li>
                            <li><a href="#">Process Automation</a></li>
                            <li><a href="#">Medical Diagnostics</a></li>
                            <li><a href="#">Machine Tools</a></li>
                            <li><a href="#">Remote Monitoring</a></li>
                            <li><a href="#">Industries</a></li>
                        </ul>
                    </li>

                <li><div><a href="#">OUR EXPERTISE</a></div></li>
                <li><div><a href="#">ABOUT US</a></div></li>
                <li><div><a href="#">CONTACT US</a></div></li>

            </ul>
.menu ul{
    text-align:justify;
    width:300px;
    min-width:500px;
    margin-top:60px;
}
.menu ul:after{
    content:'';
    display:inline-block;
    width:100%;
}
.menu ul li{
    display:inline-block;
    list-style:none;
    white-space:nowrap;
    margin:0;
    padding:0;
}
.menu ul li a{
    text-decoration:none;
    color:#000;
}
.menu ul li:hover a{
    color:#CCCC00;
    border-bottom:1px solid #CCCC00;
}
.menu ul li ul{
    display:none;
}

.menu ul li:hover ul{
    position:absolute;
    display:block;
    text-align:justify;
    width:500px;
    min-width:500px;
    margin:0;
    padding-top:20px;
}
.menu ul li:hover ul li a{
    color:#000;
    border:none;
    margin-right:25px;
}
.menu ul li:hover ul li:hover a{
    color:#CCCC00;
}
.menu li.active a{
    color:#CCCC00;
    border-bottom:1px solid #CCCC00;
}
.menu li.active ul{
    position:absolute;
    display:block;
    text-align:justify;
    width:500px;
    min-width:500px;
    margin:0;
    padding-top:20px;
}
.menu li.active ul li a{
    color:#000;
    margin-right:25px;
    border-bottom:none;
}
.menu li.active ul li:hover a{
    color:#CCCC00;
    margin-right:25px;
}
.hide{
    display:none;
}
$(document).ready(function(){

    $(".menu > li > div").click(function(){   
      if(false == $(this).next().is(':visible')) {
        $('.menu ul').slideUp(700);
      }
      $(this).next().slideToggle(700);
    });

    var url = window.location.href;
    var $current = $('.menu li ul a[href="' + url + '"]');
    $current.parents('.menu ul').slideToggle();
    $current.next('.menu ul').slideToggle();

});
1
Akshay Desai 15 sierpień 2014, 09:54

2 odpowiedzi

Najlepsza odpowiedź

Użyj oddzielnych adresów URL w HREF, odpowiadający każdej stronie. Gdy strona zostanie odświeżona, adres URL zostanie zmieniony, a menu na stronie dokładnie wiedzą, która strona jest aktualnie otwarta i które menu musi być widoczne.

1
neli 15 sierpień 2014, 08:15

edytuj Nie ma nic złego w swoim kodzie, zakładając, że ustawisz poprawne hrefy, takie jak:

<li><a href="http://localhost/software">Scada Software</a></li> // I'm using a localhost example here just to simplify.

To działa. Jeśli nie, sprawdź adres URL:

Dodaj bezpośrednio po var url = window.location.href;

To: console.log('url:' + url);

Lub to: alert('url:' + url);

A obecny adres URL zostanie wyprowadzony.


Możesz także użyć plików cookie (lub innego sposobu przechowywania trwałej zmiennej), aby przypomnieć stan aktywny po odświeżeniu strony. Oto przykład korzystania z plików cookie z jQuery: Jak ustawić / nieuszczać cookie z jQuery?.

1
Community 23 maj 2017, 11:53