Godzilla74 Godzilla74 - 5 months ago 24
jQuery Question

Perform jQuery action when clicked again

I have the basis of my menu working, where when I click a menu element, it opens (similar to JQuery accordion), and when I click on another element in the menu, the previously opened menu closes and the newly clicked on opens. Here's what it looks like:

first opened item

Now, I'm trying to implement functionality to close the currently opened menu if it is clicked again. I'm using the

slideUp();
method, but having a hard time figuring out where to put the additional code for the 2nd click on the same element.

Here's what I have:

navigation.html.erb

<!-- menu links -->
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">

<div class="menu_section">
<h3>General</h3>
<ul class="nav side-menu">
<li><a><i class="fa fa-home"></i> Home <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li><a href="index.html">Dashboard</a>
</li>
</ul>
</li>
<li><a><i class="fa fa-edit"></i> Forms <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li><a href="general_elements.html">General Elements</a>
</li>
</ul>
</li>
<li><a><i class="fa fa-bar-chart-o"></i> Data Presentation <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li><a href="chartjs.html">Chart JS</a>
</li>
</ul>
</li>
</ul>
</div>
</div>


custom.js

var URL = window.location,
$BODY = $('body'),
$MENU_TOGGLE = $('#menu_toggle'),
$SIDEBAR_MENU = $('#sidebar-menu'),
$SIDEBAR_FOOTER = $('.sidebar-footer'),
$LEFT_COL = $('.left_col'),
$RIGHT_COL = $('.right_col'),
$NAV_MENU = $('.nav_menu'),
$FOOTER = $('footer');

var setContentHeight = function () {
// reset height
$RIGHT_COL.css('min-height', $(window).height());

var bodyHeight = $BODY.height(),
leftColHeight = $LEFT_COL.eq(1).height() + $SIDEBAR_FOOTER.height(),
contentHeight = bodyHeight < leftColHeight ? leftColHeight : bodyHeight;

// normalize content
contentHeight -= $NAV_MENU.height() + $FOOTER.height();

$RIGHT_COL.css('min-height', contentHeight);
};


$SIDEBAR_MENU.find('a').on('click', function(ev) {
var $li = $(this).parent();

if ($li.hasClass('.active')) {
$li.removeClass('active');
$('ul:first', $li).slideUp(function(){
setContentHeight();
});
} else {
$li.addClass('active');
$SIDEBAR_MENU.find('.side-menu li').not($li).removeClass('active');
$SIDEBAR_MENU.find('.side-menu li').not($li).find('.child_menu').removeClass('active').slideUp();
$('ul:first', $li).slideDown(function(){
setContentHeight();
});
}
});

Answer

Change if ($li.hasClass('.active')) to if ($li.hasClass('active')) and that should resolve the issue. Check this fiddle. I have created an empty setContentHeight function to make it work.