We Keep Coding

Toggle class on element, ignore all but one child

Having a hard time solving this even after reading jQuery stopPropagation for only some class of elements, Javascript toggle class on element and countless other references.
I want to toggle class "active" when clicking on nav > ul > li AND .dd-toggle (a child of .dropdown) but NOT .dropdown itself or anything within it (other than .dd-toggle).
<nav class="nav-dropdowns" role="navigation">
<ul>
<li class="">
<span class="dropdown-title">Price</span>
<div class="dropdown">
<a class="dd-toggle">X</a>
<div id="field-price" class="field"><label>Price Range</label>
<div class="details"></div>
</div>
</div> <button type="submit" class="extra-submit buttonstyle">Search</button>
</div>
</li>
<li class="">
<span class="dropdown-title">Type</span>
<div class="dropdown">
<a class="dd-toggle">X</a>
<div id="field-type" class="field"><label>Property Type</label>
<div class="details"></div>
</div> <button type="submit">Search</button>
</div>
</li>
<li class="search-submit">
<button class="search-button" type="submit">Search</button>
</li>
</ul>
</nav>
I have tried numerous variations starting with:
jQuery(document).ready(function($){
$( "nav > ul > li" ).click(function() {
$( this ).closest().toggleClass( "active" );
});
});
then
jQuery(document).ready(function($){
$( "nav > ul > li" ).click(function() {
$( this ).toggleClass( "active" );
});
$('.dropdown').click(function(e) {
return false;
});
});
and finally
jQuery(document).ready(function($){
$( "nav > ul > li" ).click(function( event ) {
event.stopImmediatePropagation();
$( this ).toggleClass( "active" ).not('.dropdown');
});
});
I get ignoring the children of or closest to, but can't figure out how to do that but still observe a child of the child. Perhaps only first child of?
Ignore .dropdown but NOT .dd-toggle
Am I close?

I would really recommend reading:
Decoupling Your HTML, CSS, and JavaScript. It will really reduce your tightly coupled code.
Everything in Green will change to red, unless you are in blue (in green). Although I'm not sure (because you're question isn't clear) if you're asking for active on either the li and the .dd-toggle (as it is now) or only the li which wouldn't be hard.
If you need active only on the li simply change the .dd-toggle code to:
$(this).parents('li').first().toggleClass('active');
CodePen.IO Working Example
$(document).ready(function() {
$("nav > ul > li").on("click", function(e) {
if ($(e.target).parents('.dropdown').length === 0 &&
!$(e.target).hasClass('dropdown')) {
$(this).toggleClass("active");
}
});
$(".dd-toggle").on("click", function(e) {
$(this).toggleClass("active");
});
});
nav > ul > li, .dd-toggle {
border: 2px solid green;
cursor: pointer;
user-select: none;
}
.active {
border: 2px solid red;
}
.dropdown {
border: 2px solid blue;
cursor: default;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="nav-dropdowns" role="navigation">
<ul>
<li class="">
<span class="dropdown-title">Price</span>
<div class="dropdown">
<a class="dd-toggle">X</a>
<div id="field-price" class="field"><label>Price Range</label>
<div class="details"></div>
</div>
</div> <button type="submit" class="extra-submit buttonstyle">Search</button>
</div>
</li>
<li class="">
<span class="dropdown-title">Type</span>
<div class="dropdown">
<a class="dd-toggle">X</a>
<div id="field-type" class="field"><label>Property Type</label>
<div class="details"></div>
</div> <button type="submit">Search</button>
</div>
</li>
<li class="search-submit">
<button class="search-button" type="submit">Search</button>
</li>
</ul>
</nav>

Detect div > ul has been changed

I have some test code.
<div class="someclass" id="someid">
<div class="form-someclass1 class2 ">
<div class="button action right addbutton" id="btnId"><i class="add"></i> Add</div>
</div>
<ul class="ui-sortable">
<!-- dynamically li gets added. -->
</ul>
</div>
As soon as we click on "btnId" li gets added in ul and div has been changed. Similarly, if we remove li ul gets changed and div has been changed. Is there any way to get information that div > ul has been changed and on which event should we trigger the code in order to know change?
I tried for DOMSubTreeNodeChanged mutator events but as per google, it has compatibility issues and not to use.

How about this:
$("#btnId").on('click', function(e){
//alert(1112);
var target = $(this).closest(".someclass").find(".ui-sortable");
target.append('<li><span class="tab">Message Center</span></li>');
});
$(document).on('DOMNodeInserted', function(e) {
//check if li inserted to ul
if(e.target.localName == "li"){
//do somethings!
console.log("Inserted a li for ul!");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="someclass" id="someid">
<div class="form-someclass1 class2 ">
<div class="button action right addbutton" id="btnId"><i class="add"></i> Add</div>
</div>
<ul class="ui-sortable">
<!-- dynamically li gets added. -->
</ul>
</div>

Menu bar Malfunctioning with AngularJs

I am bit new to AngularJs so I have got stuck into the problem.
Let me explain what I want to achieve.
I have design two div with child and parent relation.
// first parent div
<div>
<div>
child div // show/hide content of this div
</div>
</div>
// second parent div
<div>
<div>
child div // show/hide content of this div
</div>
</div>
When I hover or move the mouse over parent div it should hide/show the respective child div.
But with my code on hover it hides/shows the content of both the child div.What changes do I have to do in code?
See complete code
<body ng-app="app">
<div ng-app="headermain" ng-controller="headerController">
<div class="top-menu col-xs-36 ">
// parent div one
<div class="menu-item col-xs-6" ng-mouseover="hoverIn()" style="background-color:pink">
<span >Parent one</span>
// child div, want to hide/show content of this div
<div class="drop-down;col-xs-10" ng-show="showMe" ng-mouseleave="hoverOut()" style="background-color:pink">
<ul>
<li>child one details</li>
<li>parent one detail</li>
</ul>
</div>
</div>
// parent div two
<div class="menu-item col-xs-6" ng-mouseover="hoverIn()">
<span >Parent two</span>
// child div, want to hide/show content of this div
<div class="drop-down;col-xs-10" ng-show="showMe" ng-mouseleave="hoverOut()">
<ul>
<li>child two Details</li>
<li>parent two detail</li>
</ul>
</div>
</div>
</div>
</div>
Controller for this code, see below
var app = angular.module("app", []);
app.controller("headerController",function($scope){
$scope.hoverIn = function(){
this.showMe = true;
};
$scope.hoverOut = function(){
this.showMe = false;
};
});
Css file
.top-menu {
overflow: hidden;
}
.top-menu .drop-down {
position: absolute;
top: 20px;
z-index: 10000;
background-color: white;
box-shadow: 0px 0px 3px rgb(241, 241, 241);
border: 1px solid #d1d1d1;
}
.top-menu .drop-down ul {
padding: 0px;
margin: 0px;
list-style-type: none;
min-width: 180px;
}

You have to change the name of your functions since both div's are using the same function and changing the same attribute showMe.
HTML:
<body ng-app="app">
<div ng-app="headermain" ng-controller="headerController">
<div class="top-menu col-xs-36 ">
// parent div one
<div class="menu-item col-xs-6" ng-mouseover="hoverIn(1)" style="background-color:pink">
<span>Parent one</span> // child div, want to hide/show content of this div
<div class="drop-down;col-xs-10" ng-show="showMe[1]" ng-mouseleave="hoverOut(1)" style="background-color:pink">
<ul>
<li>child one details</li>
<li>parent one detail</li>
</ul>
</div>
</div>
// parent div two
<div class="menu-item col-xs-6" ng-mouseover="hoverIn(2)">
<span>Parent two</span> // child div, want to hide/show content of this div
<div class="drop-down;col-xs-10" ng-show="showMe[2]" ng-mouseleave="hoverOut(2)">
<ul>
<li>child two Details</li>
<li>parent two detail</li>
</ul>
</div>
</div>
</div>
</div>
JS:
$scope.showMe=[];
$scope.hoverIn = function(id) {
$scope.showMe[id] = true;
};
$scope.hoverOut = function() {
$scope.showMe[id] = false;
};

jQuery switch active class depending on which section is showing

I have several sections within a document as follows:
<section id="step1">
</section>
<section id="step2" style="display:none">
</section>
<section id="step3" style="display:none">
</section>
I am showing and hiding these depending on user interaction. I wanted to have some kind of circular heading to indicate the user is on section 2 of 3 for example like so:
<div id="indicators" class="clearfix">
<div class="center-div">
<ul>
<li id="step1-circle" class="circle active"></li>
<li id="step2-circle" class="circle"></li>
<li id="step3-circle" class="circle"></li>
</ul>
</div>
</div>
How would I switch the active class depending on which section is showing?

You can use the addClass() method in tandem with the removeClass() method like:
function makeIndicatorCircleActive(id){
// Remove active state of current circle
$('#indicators .active').removeClass('active');
// Add active state to desired element
$(id).addClass('active');
}
// Somewhere else in the code...
makeIndicatorCircleActive('#step2-circle);

I've added a button for the animation. You'd need to show more example code of your implementation, but you may be able to get away with let $section = $('section:visible') and instead of putting this in a click function, create a generic function name, which is triggered whenever your event occurs.
$('button').click(function() {
// context used for jQuery
let $section = $(this).closest('section');
// get next circle, if current circle is last, then get first circle
var $next = $('.circle.active', $section).next('.circle'),
$next = ($next.length && $next) || $('.circle', $section).first();
$('.circle.active', $section).removeClass('active'); // remove all actives
$next.addClass('active'); // add new active
});
.circle {
background: black;
border-radius: 25px;
display: inline-block;
list-style-type: none;
width: 50px;
height: 50px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
}
.active {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div class="clearfix">
<div class="center-div">
<ul>
<li class="circle active"></li>
<li class="circle"></li>
<li class="circle"></li>
</ul>
</div>
<button>Next</button>
</div>
</section>
<section>
<div class="clearfix">
<div class="center-div">
<ul>
<li class="circle active"></li>
<li class="circle"></li>
<li class="circle"></li>
</ul>
</div>
<button>Next</button>
</div>
</section>

Appended content do not get the proper CSS effect

I want append an HTML element into a DIV, but this one do not get the proper CSS like the original ones.
I have a dropdown menu, and want append on it new <li> rows.
My HTML code:
<br/><br/>
Append it
<div class="container">
<div class="row">
<div class="col-sm-3">
<h5>Normal Dropdown Button</h5>
<div class="panel panel-default">
<div class="panel-body">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span data-bind="label">Select One</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<div id="append">
</div>
<li>Item 1</li>
<li>Another item</li>
<li>This is a longer item that will not fit properly</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<br/><br/>
My Javascript code:
$( document.body ).on( 'click', '.append', function( event ) {
$("#append").append("<li>Item 1</li>");
return false;
});
Here a live example: http://jsfiddle.net/dJDHd/2136/
EDITED WITH MY MAIN PROBLEM:
https://jsfiddle.net/Lr7gn020/1/
Click on APPEND IT, and then check the appended element by clicking on Select One button (Dropdown menu), and you will see that it do not get the proper CSS like the others (Item Test).

You've nested a div in the ul and the styles target .dropdown-menu>li>a so the div is breaking that. A div can't be a direct child of a ul and li can't be a direct child of a div. Instead of nesting a div in the ul, then appending li's to the div, you can $.prepend() li's directly to the menu, if you want them to appear at the beginning of the menu when you add them. If you don't care where they appear, you can $.append() them to the bottom instead.
$(document.body).on('click', '.append', function(event) {
$(".dropdown-menu").prepend("<li>Item Test</li>");
return false;
});
.btn-input {
display: block;
}
.btn-input .btn.form-control {
text-align: left;
}
.btn-input .btn.form-control span:first-child {
left: 10px;
overflow: hidden;
position: absolute;
right: 25px;
}
.btn-input .btn.form-control .caret {
margin-top: -1px;
position: absolute;
right: 10px;
top: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br/><br/>
Append it
<div class="container">
<div class="row">
<div class="col-sm-3">
<h5>Normal Dropdown Button</h5>
<div class="panel panel-default">
<div class="panel-body">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span data-bind="label">Select One</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Item 1</li>
<li>Another item</li>
<li>This is a longer item that will not fit properly</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<br/><br/>

The reason behind the appended option having different css is due to the fact that you are appending it inside a div element.
The current CSS of the li elements comes from the bootstrap css with this selector.
dropdown-menu>li>a
Since you have a div node inside ul (which is wrong and make html invalid) and you are appending a new li inside this div with JS, the above selector will not reach this node and CSS will not be applied.
You should add the li node directly under the ul node.
Fiddle : http://jsfiddle.net/9med3Lou/

Change your jquery part.
$( document.body ).on( 'click', '.append', function( event ) {
$(".dropdown-menu").append("<li>Item 1</li>"); //append with ul, not div
return false;
});