0

I've searched and not found exactly what I was looking for.

I have my menu working with cookies so when the page is reloaded it keeps the menus that were open, open.

But I realised when you click say a sub-item of Hyperlink 2 it will close Hyperlink 2 altogether. Is there a way too keep it open?

http://jsfiddle.net/Dnamixup/5S54v/

I tried using the simulate click answer from Here but it didn't work unless I placed it wrong.

I'm still new at javascript/jQuery but I'm slowly getting it!

Thank you

<ul class="nav">
<li><a>Hyperlink 1</a>

</li>
<li class="drop"><a>Hyperlink 2</a>

    <ul id="m1">
        <li><a href="#">Hyperlink Sub</a>

        </li>
        <li><a href="#">Hyperlink Sub</a>

        </li>
    </ul>
</li>
<li class="drop"><a>Hyperlink 3</a>

    <ul id="m2">
        <li><a href="#">Hyperlink Sub</a>

        </li>
        <li><a href="#">Hyperlink Sub</a>

        </li>
    </ul>
</li>
<li class="drop"><a>Hyperlink 4</a>

    <ul id="m3">
        <li><a href="#">Hyperlink Sub</a>

        </li>
        <li><a href="#">Hyperlink Sub</a>

        </li>
    </ul>
</li>


jQuery(function ($) {
// jQuery code in here can safely use $
$('.nav li')
    .css({
    cursor: "pointer"
});

$(".drop")
    .on('click', function () {
    $(this).toggleClass('open');
    $(this).find('ul').toggle();
    $.cookie('open_items', 'the_value');
    openItems = new Array();
    $("li.drop").each(function (index, item) {
        if ($(item).hasClass('open')) {
            openItems.push(index);
        }
    });
    $.cookie('open_items', openItems.join(','));
});

if ($.cookie('open_items') && $.cookie('open_items').length > 0) {
    previouslyOpenItems = $.cookie('open_items');
    openItemIndexes = previouslyOpenItems.split(',');
    $(openItemIndexes).each(function (index, item) {
        $("li.drop").eq(item).addClass('open').find('ul').toggle();
    });
}
});
Community
  • 1
  • 1
Dnamixup
  • 17
  • 2
  • 7

3 Answers3

6

Stop propagation of clicked children:

DEMO

 $(".drop li a")
        .on('click', function (e) {
            e.stopPropagation();
        });
A. Wolff
  • 74,033
  • 9
  • 94
  • 155
  • 1
    You Sir, are my superhero! Thank you very much! – Dnamixup Dec 05 '13 at 13:14
  • @A.Wolff: +1 Your answer is great and does solve the problem. Note to OP though, while this works, an additional event handler is added to workaround an issue. In general this is perfectly fine but you could avoid the issue in the first place by targeting your elements more directly in your initial selector. My point being why apply a solution to work around an issue you can avoid to begin with? – Nope Dec 05 '13 at 13:30
2

Changing your selector for the click event to ".drop>a" seems to work. All you need to do then is manage the li slightly differently, similar to this:

$(".drop>a").on('click', function (eventData) {
    var $listItem = $(this).closest('li');

    $listItem.find('ul').toggle();
    $listItem.toggleClass('open');

    $.cookie('open_items', 'the_value');
    openItems = new Array();

    $("li.drop").each(function (index, item) {
        if ($(item).hasClass('open')) {
            openItems.push(index);
        }
    });
    $.cookie('open_items', openItems.join(','));
});

DEMO - Leaving menu open when inner link is clicked

Nope
  • 22,147
  • 7
  • 47
  • 72
1

You shouldn't apply the click event to the .drop elements but to children of them. Something like:

<div class="drop">
   <a class="click-to-open">Click here to open</a>
      <ul>
         <li>Sub links etc...</li>
         <li>...</li>
      </ul>
 </div>


 $('.drop .click-to-open').click(function() {

   //toggle the open class etc

   //use .parent() to access the .drop div
   $(this).parent().toggleClass('open');

 });
matteok
  • 2,189
  • 3
  • 30
  • 54