Develop Reference

Jquery, can't update attribute previously created

I'm just trying to work on new slider menu but I've a problem with Jquery.
I've a link. When I click on I use .css('left', -230) and all is okay but when i want to reverse by another clicked link like .css('left', 0) nothing happen.
I show you some code :
// The open part "target.width()" = 230
$('.nav-item').on('click', function () {
if( 0 < $(this).find('.navbar-nav__sub').length ) {
var target = $('.navbar-nav');
target.css('left', -target.width());
}
});
// The close part
$('.navbar-nav__sub .go-back').on('click', function () {
console.log('HERE');
var target = $('.navbar-nav');
console.log(target);
console.log(target.css('left'));
target.css('left', 0);
console.log(target.css('left'));
console.log('END');
});
A strange thing in this problem is that I've this in my console :
HERE
Object { 0: ul.navbar-nav.flex-column, length: 1, prevObject: […] }
-230px
0px
END
It seem that the code work well but in my page the left attribute is always to -230px.
Someone have an idea ?
Thank you.
PS: As asked the JSfiddle who reproduce my problem
https://jsfiddle.net/w7Lknsxg/
If you click on "Menu01" Color turn to red and when you click on "<=" in submenu you have the execution in the console but the color don't change.
You can see the class navbar-nav get new class "toto" but don't lost when I try to remove it in the second case.

Because the .go-back is nested within the .nav-item you are firing both event listeners due to event bubbling. You can stop this with event.stopPropagation(); from within the listener placed on the child item. (or be more specific in what you target as not to include subelements)
var ftl = window.ftl || {};
ftl.navbar = {
config: {
targetName: '.nav',
target: null,
},
init: function init() {
this.config.target = $(this.config.targetName);
$('.navbar-toggle').on('click', function () { ftl.navbar.toggle(); });
$('.nav-item').on('click', function () {
if( !ftl.navbar.config.target.hasClass('open') ) {
ftl.navbar.open();
}
// test la présence d'un sous menu
if( 0 < $(this).find('.navbar-nav__sub').length ) {
var target = $('.navbar-nav');
target.addClass('toto');
target.css('color', 'red');
}
});
$('.navbar-nav__sub .go-back').on('click', function (event) {
event.stopPropagation();
console.log('HERE');
var target = $('.navbar-nav');
console.log(target);
console.log(target.hasClass('toto'));
target.removeClass('toto');
target.css('color', "green");
console.log('END');
})
},
open: function open() {
this.config.target.addClass('open').one('transitionend', function () {
ftl.navbar.config.target.addClass('opened');
});
},
close: function close() {
this.config.target.removeClass('opened')
.removeClass('open');
},
toggle: function toggle() {
if( this.config.target.hasClass('open') ) {
this.close();
} else {
this.open();
}
}
}
$(document).ready(function() {
ftl.navbar.init();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav">
<nav class="navbar" role="navigation">
<div class="container-nav flex-column">
<div class="navbar__header">
<a href="#" class="no-style">
<i class="fa fa-comment-o fa-2x navbar__icon" aria-hidden="true"></i>
<span class="navbar__text"><strong class="text-primary">web</strong>tutu</span>
</a>
</div>
<div class="navbar__divider"></div>
<ul class="navbar-nav flex-column">
<li id="nav-item--one" class="nav-item">
<a href="#nav-item--one">
<i class="fa fa-user-circle-o navbar__icon" aria-hidden="true"></i>
<span class="navbar__text">Menu01</span>
</a>
<ul class="navbar-nav__sub">
<li>link 01</li>
<li>link 02</li>
<li><a class="go-back" href="#"> <= </a></li>
</ul>
</li>
<li id="nav-item--two" class="nav-item">
<a href="#nav-item--two">
<i class="fa fa-user-circle-o navbar__icon" aria-hidden="true"></i>
<span class="navbar__text">Menu02</span>
</a>
</li>
<li id="nav-item--three" class="nav-item">
<a href="#nav-item--three">
<i class="fa fa-user-circle-o navbar__icon" aria-hidden="true"></i>
<span class="navbar__text">Menu03</span>
</a>
</li>
<li class="mt-auto">
<i class="fa fa-angle-double-right fa-2x navbar-toggle" aria-hidden="true"></i>
</li>
</ul>
</div>
</nav>
</nav>

How do I make my sidebar navigation child menus remain expanded and active on new HTTP request in Laravel?

I have an issue with my child menus.When I click a child menu it becomes active after http request but I want it to remain expanded after http request(page refresh).Menu structure is below.
<ul class="sidebar-navigation>
#foreach($parent as $parent)
<li>{{$parent->name}}
<ul>
#foreach($child as $child)
#if(isset($_GET['name']) && $_GET['name'] == $child->name)
<li class="active">
#endif
{{$child>name)}}
</li>
#endforeach
</ul>
</li>
#endforeach
</ul>

Here is an idea, and it's what i do to acheieve this effects. i use AdminLTE, you should base this code to change your code, Basic idea is judge current route if route need open sidebar then give a class 'active'
to html tag.
Html:
<div class="main-sidebar">
<div class="sidebar">
<ul class="sidebar-menu">
<li class="treeview {{ sidebar_open(['admin.roles.*']) }}">
<a href="#">
<i class="fa fa-user-secret"></i>
<span>角色管理</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-circle-o"></i>角色列表</li>
<li><i class="fa fa-circle-o"></i>新建角色</li>
</ul>
</li>
</ul>
define a helper functions:
<?php
if (!function_exists('sidebar_open')) {
function sidebar_open($routes = []) {
$currRoute = Route::currentRouteName();
$open = false;
foreach ($routes as $route) {
if (str_contains($route, '*')) {
if (str_contains($currRoute, substr($route, '-1'))) {
$open = true;
break;
}
} else {
if ($currRoute === $route) {
$open = true;
break;
}
}
}
return $open ? 'active' : '';
}
}

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:
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>Dashboard
</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>General Elements
</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>Chart JS
</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();
});
}
});

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.

How to prevent auto scrolling when click tab

I'm working on a project and stuck on the tabs. No matter what I do the page scrolling down when I click a tab. This is my HTML:
<ul class="list">
<li class="tab1 active">
<i class="fa fa-external-link"></i>
Quick Reports
</li>
<li class="tab1">
<i class="fa fa-star-o"></i>
My Folders
</li>
<li class="tab1">
<i class="fa fa-folder-open-o"></i>
My Team Folders
</li>
<li class="tab1">
<i class="fa fa-files-o"></i>
Public Folders
</li>
</ul>
var open_tab = function() {
$('.tab1').each(function (i, tab) {
UTILS.addEvent(tab, 'click', function() {
$('.list li.active').removeClass('active');
$(this).addClass('active');
$('.active-panel').removeClass('active-panel');
var target_panel_selector = $(this).find('a').attr('href');
$(target_panel_selector).addClass('active-panel');
window.location.hash = target_panel_selector ;
});
});
};
And the style of .active-panel is display: block. I tried to use:
e.preventDefault();
or
tab.find('a').on('click', function(e){
alert("finally!!");
e.preventDefault();
});
and other stuff I found on the web but nope, not working.

<ul class="list">
<li class="tab1 active">
<i class="fa fa-external-link"></i>
<a data-href="#quick-reports" class="tab" href="javascript:void(0)">Quick Reports</a>
</li>
<li class="tab1">
<i class="fa fa-star-o"></i>
<a data-href="#my-folders" class="tab" href="javascript:void(0)">My Folders</a>
</li>
<li class="tab1">
<i class="fa fa-folder-open-o"></i>
<a data-href="#my-team-folders" class="tab" href="javascript:void(0)">My Team Folders</a>
</li>
<li class="tab1">
<i class="fa fa-files-o"></i>
<a data-href="#public-folders" class="tab" href="javascript:void(0)">Public Folders</a>
</li>
</ul>
<script>
function maketabActive($strElement)
{
$('.list li.active').removeClass('active');
$strElement.addClass('active');
$('.active-panel').removeClass('active-panel');
var target_panel_selector = $strElement.find('a').data('href');
$(target_panel_selector).addClass('active-panel');
// Save selected tab index in session stroage.So after page refresh active tab will be maintained
sessionStorage.setItem('selected-tab', $strElement.index());
}
$(document).ready(function () {
// Check if selected tab is stored in session stroage
if (sessionStorage.getItem('selected-tab'))
{
//Make tab active based on index got from session stroage
maketabActive($(".tab1:eq(" + sessionStorage.getItem('selected-tab') + ")"));
}
});
var open_tab = function () {
$('.tab1').each(function (i, tab) {
UTILS.addEvent(tab, 'click', function () {
maketabActive($(this));
});
});
};
</script>

I think that it's scrolling when you are setting the hash here
window.location.hash = target_panel_selector ;
Take a look at: https://stackoverflow.com/a/14690177/5612557

UPDATE
Try to add a return false into the click event and as suggest Diego change the hash method (but work only in a newer browser) like this:
var open_tab = function() {
$('.tab1').each(function (i, tab) {
UTILS.addEvent(tab, 'click', function() {
$('.list li.active').removeClass('active');
$(this).addClass('active');
$('.active-panel').removeClass('active-panel');
var target_panel_selector = $(this).find('a').attr('href');
$(target_panel_selector).addClass('active-panel');
//window.location.hash = target_panel_selector ;
if(history.pushState) {
history.pushState(null, null, target_panel_selector);
} else {
window.location.hash = target_panel_selector;
}
return false; // <-- add this line
});
});
};

You may try
event.stopPropagation();

Add/Remove class based on active URL

My HTML code looks like this:
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
<div class="menu_section">
<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>
Dashboard
</li>
<li>
dashbord2
</li>
</ul>
</li>
<li>
<a>
<i class="fa fa-edit"></i>form
<span class="fa fa-chevron-down"></span>
</a>
<ul class="nav child_menu" style="display: none">
<li>
general form
</li>
<li>
form validation
</li>
</ul>
</li>
</ul>
</div>
</div>
to add/remove class based on current url, i am using this:
$(function () {
var url = window.location.href;
$('#sidebar-menu a[href="' + url + '"]').parent('li').addClass('current-page');
$('#sidebar-menu a').filter(function () {
return this.href == url;
}).parent('li').addClass('current-page').parent('ul').slideDown().parent().addClass('active');
});
It works, but when i click this link
dashbord2
the class="current-page" doesn't change to current path url
How i fix this?

Your issue arises from the page not being reloaded when you click on the link with hash in it, while your code only executes on page load, or dom ready to be exact. The solution is to whether use window's hashchange event (not supported in < IE8) or, like #sirrocco mentioned, use click event with setTimeout to detect the change of hash:
function setCurrentMenuPage() {
var url = window.location.href;
var anchors = $('#sidebar-menu a');
anchors.parent('li').removeClass('current-page');
anchors.filter(function () {
return this.href == url;
}).parent('li').addClass('current-page').parent('ul').slideDown().parent().addClass('active');
}
$(function () {
setCurrentMenuPage();
$('#sidebar-menu a').on('click', function (e) {
if ($(this).attr('href').indexOf("#") >= 0) {
setTimeout(function () {
setCurrentMenuPage();
}, 100);
}
});
});
Hope that helps.