Как активировать ссылку на конкретное родительское меню после повторного нажатия на нее

0

Я не уверен, есть ли лучший способ, которым я должен заниматься, но у меня есть ситуация, когда я должен щелкнуть ссылку навигации по родительскому меню, чтобы показать выпадающие дочерние ссылки для этой родительской ссылки, после чего родительская ссылка станет доступны для доступа, чтобы перейти на определенную страницу. Когда я нажимаю ссылку на родительскую ссылку и параметры дочерней ссылки, раскрывающееся меню снова закрывается. Так что все это здорово.

Вот что я до сих пор...

var mtargetmenusection = $('#menu-top > ul > li');

mtargetmenusection.one('click', function(e){
e.stopPropagation();
e.preventDefault();
var mthis = $(this);
if(mthis.find('div[class^="dropdown"]').length != 0) {
mthis.find('div[class^="dropdown"]').stop(true,true).css({display:'none'}).slideDown(150);
}       
});

$(document).click(function(e){
$(".dropdown").fadeOut(50);
});

Поэтому, основываясь на этом коде, если я уже нажал на родительскую ссылку из моей навигации по меню, а затем нажмите вторую родительскую ссылку с помощью навигации по меню, как этот щелчок укажет на предыдущую родительскую ссылку, на которую я нажал, активную ссылку и вместо этого по умолчанию открывается только собственное раскрывающееся меню?

Благодарю!

Теги:

2 ответа

0
Лучший ответ

Спасибо, Кевин. Ваш код вдохновил меня глубже взглянуть на то, как моя проблема может быть решена. В приведенном ниже коде я применяю следующие подходы:

  1. Сначала отмените эффекты CSS-зависания по умолчанию с помощью jQuery
  2. Затем, используя метод on, чтобы определить, отображается ли выпадающее меню или нет, затем определяется, как используется метод preventDefault.
  3. Наконец, скрыть все выпадающие меню, если вы щелкните в любом месте документа.

Здесь вы можете увидеть мою демоверсию. И вот код ниже:

HTML:

<div id="menu-top" class="jq-off">
<ul>
<li>
<a href="http://www.google.com"><span>About</span></a> 
<div class="dropdown">
<ul>
<li><a href="/">one</a></li>
<li><a href="/">two</a></li>
<li><a href="/">three</a></li>
</ul>
</div>
</li>

<li>
<a href="http://yahoo.com"><span>Join</span></a>
<div class="dropdown">
<ul>
<li><a href="/">one</a></li>
<li><a href="/">two</a></li>
<li><a href="/">three</a></li>
</ul>
</div>
</li>
</ul>
</div>

CSS:

#menu-top {
    background:#f1f1f1;
    text-align:center;
    opacity:0.9;
}

#menu-top > ul {
    padding:0; 
    margin:0 auto;
    display:table;
}

/*FIRST LEVEL*/

#menu-top > ul > li {
    position:relative;
    float:left;
    list-style:none; 
}

#menu-top > ul > li:hover > a, #menu-top > ul:not( :hover ) > li.active > a, #menu-top ul li a:hover {
  color:#444;
}

#menu-top > ul > li > a {
    margin:0;
    padding:0 13px; 
    display:block;
    line-height:400%;
    font-size: 100%;
  color:#001489;
  text-decoration:none; 
    outline-color:#f1f1f1;
}

#menu-top > ul > li span:after {
    width: 0;
    height: 0;
    border: 0.39em solid transparent;
    border-bottom: none;
    border-top-color: #fff;
    border-top: 0.39em solid transparent;
    border-bottom: 0.39em solid transparent; 
    border-left-color: #444;
    content: '';
    display: inline-block;
    position: relative;
    right: -0.353em;
    top:-0.1em;
}

#menu-top > ul > li:hover span:after {
    width: 0;
    height: 0;
    border: 0.39em solid transparent;
    border-bottom: none;
    border-top-color: #444;
    content: '';
    display: inline-block;
    position: relative;
    right: -0.353em;
    top:-0.1em;
}

#menu-top .trans {
    display:none;
}

/*SECOND LEVEL*/
#menu-top.jq-off > ul > li:hover > .dropdown {
    display:block;
}

#menu-top .dropdown {
  display:none;
  position:absolute;
    z-index:2;
  white-space: nowrap;
    background: #f1f1f1;
}

#menu-top .dropdown ul {
    padding:0;
    margin:0;
    list-style: none;
}

#menu-top .dropdown ul li a {
  padding:0;
  margin:5px 10px;
  display:block;
  color:#444;
  font-size:90%;
    line-height:250%;
  text-transform:uppercase;
  text-decoration:none;
    text-align:left;
}

#menu-top .dropdown ul li a:hover {
    color:#444;
    text-decoration:underline;
}

/*CHROME-SAFARI ONLY*/
@media screen and (-webkit-min-device-pixel-ratio:0) { 

  #menu-top > ul > li span:after, #menu-top > ul > li:hover span:after {
    border:none;
    }

    #menu-top .trans {
    position:relative;
    left:5px;
    display:inline-block;
    transition-property:transform;
    -webkit-transition-duration: 0.3s; 
    -webkit-transition-property: -webkit-transform;
    }

    #menu-top > ul > li:hover .trans {
    transform:rotate(deg);
    -webkit-transform:rotate(90deg);
    }
}

JQuery:

function menu() {
//disable the default css hover action
$('#menu-top').removeClass('jq-off');

$('#menu-top > ul > li').on('click', function (e) {
    e.stopPropagation();
    var mthis = $(this);    
    var mparentdropdown = mthis.find('.dropdown');

    //prevent default link action for this parent link if this dropdown is hidden
    if (mparentdropdown.is(':hidden')) { 
        e.preventDefault(); 
    }

    //if a dropdown is hidden on click, then hide all other dropdowns and slide down this dropdown
    if(mparentdropdown.css("display") == "none"){
        $(".dropdown").fadeOut(50);
        mparentdropdown.stop(true,true).css({display:'none'}).slideDown(150, function(){ });     
    }
});

//click anywhere in the document to close all dropdown menus
$(document).click(function(e){
    $(".dropdown").fadeOut(50);
});
}

(function($) {
menu();
})(jQuery);
Поделиться
0

Вы слишком усложняете это. вам не нужно.one, и вам не нужно знать, существует ли элемент для его slidetoggle.

var mtargetmenusection = $('#menu-top > ul > li');

mtargetmenusection.on('click', function (e) {
    e.preventDefault();
    var mthis = $(this);
    mthis.find('div[class^="dropdown"]').stop(true, true).slideToggle(150);
});

$(document).click(function (e) {
    $target = $(e.target);
    if ($target.is("#menu-top > ul > li")) {
        // only hide siblings of the clicked li
        $target.siblings().children(".dropdown").fadeOut(50);
    } else {
        // hide them all
        $(".dropdown").fadeOut(50);
    }
});

http://jsfiddle.net/V68Fm/1/

Разница заключается в том, что нажатие на li взаимодействует только с этим ли, а затем не останавливает событие от пузырьков. Затем, когда событие достигает документа, документ обрабатывает скрытие других несвязанных выпадающих списков или все, если элемент с кликом не был одним из lis.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню