How to manipulete li element in Dom through useRef() React - javascript

I have a bunch of li elements that I want to listen to, and if they "clicked" I want to console.log("hello").
the javascript code below is the way of handling that situation I mentioned.
But how am I gonna listen to the "li" click method in React without adding
onClick(()=>console.log("hello) on each li element ?
JAVASCRIPT CODE ;
document.getElementsByTagName("li")
.addEventListener("click",()=>{
console.log("hello")
})
<ul className="animate__animated animate__fadeInLeft">
<li ref={lis}> Home </li>
<li ref={lis}> Shop </li>
<li ref={lis}> Customized Portrait </li>
<li ref={lis}> Portfolio </li>
<li ref={lis}> About Me </li>
<li ref={lis}> Behind the Scenes </NavLink>
</li>
</ul>

Related

How to prevent/stop click propagation in vuejs

I have a recursive list (tree) and each element has a #click="sayHello(el.id)". Now the problem is, since it is a nested list like:
list-element-0-01
├──list-el-1-01
│ └──list-el-2-01
└──list-el-1-02
└──list-el-2-02
If I click the element: list-el-2-01 then I get the output of
> "list-el-2-01"
> "list-el-1-01"
> "list-el-0-01"
In exact that order. I mean I get it, looking at the html:
<ul>
<li #click="sayHello('list-el-0-01')"> one-one
<ul>
<li #click="sayHello('list-el-1-01')"> two-one
<ul>
<li #click="sayHello('list-el-2-01')"> three-one </li> // I click this
</ul>
</li>
<li #click="sayHello('list-el-1-02')"> two-two
<ul>
<li #click="sayHello('list-el-2-02')"> three-two </li>
</ul>
</li>
</ul>
</li>
</ul>
It makes sense that I am also clicking all the wrapping elements, somehow. My question - is there a way to only have the exact element fire it's click event?

You can stop propogation using the .stop event modifier as:
#click.stop="sayHello"
Now the event won't be propagated to the parent
More on the list of event modifiers: https://v2.vuejs.org/v2/guide/events.html#Event-Modifiers

Responsive nav with jquery, dropdowns only open when hovered over, the dropdown arrow won't work

I'm creating a website for a project and i'm not allowed to use frameworks (so no bootstrap but jquery is allowed.), earlier i had a problem where the navigation bar when collapsed (screen width under 800px) has all the individual links expanded, rather than being in individual categories.
I've now fixed that but i've now got this problem where the menu's wont stay open / the arrows when clicked just take you to the subcategories heading. This makes the site unusable for mobiles essentially as no one will think to long click a tab to open each one.
I've uploaded this website to
here
The Html nav bar
<nav role="navigation" id="cssmenu">
<ul>
<li>Home</li>
<li class="has-sub">Courses
<ul>
<li>Digital Media</li>
<li>Web Development</li>
<li>Journalism</li>
<li class="last">Information & Communications</li>
</ul>
</li>
<li class="has-sub">Facilities
<ul>
<li>Societies</li>
<li>Jobs and Placements</li>
<li class="last">Library</li>
</ul>
</li>
<li class="has-sub active">Manchester & Student Life
<ul>
<li>Travel</li>
<li>Attractions</li>
<li class="last">Nightlife</li>
</ul>
</li>
<li class="has-sub">Student Help
<ul>
<li>Finance</li>
<li>Student Union</li>
<li class="last">Assistance</li>
</ul>
</li>
<li class="last">Contact</li>
</ul>
</nav>
The Jquery script
( function( $ ) {
$( document ).ready(function() {
// Cache the elements we'll need
var menu = $('#cssmenu');
var menuList = menu.find('ul:first');
var listItems = menu.find('li').not('#responsive-tab');
// Create responsive trigger
menuList.prepend('<li id="responsive-tab">Digi-Co</li>');
// Toggle menu visibility
menu.on('click', '#responsive-tab', function(){
listItems.slideToggle('fast');
listItems.addClass('collapsed');
});
});
} )( jQuery );
The css can also be found
here
Any help will be appreciated
Thank you.

Simplifying click and toggle function with jquery

I need some help making jQuery click and toggle function being simplified.
JS FIDDLE
This is what I have:
HTML
<div class="category-list-content">
<h4><strong>Category</strong></h4>
<ul class="category-list">
<li class="">
Company
</li>
<li class="">
Industry
</li>
<li class="">
Job Title
</li>
<li class="">
Tenure
</li>
<li class="">
Seniority Level
</li>
</ul>
</div>
ABOVE are my main category list
<div class="category-list-sub-content">
<h4><strong>Sub Category</strong></h4>
<ul class="segmentation-list ">
<p>Company</p>
<li class="">9lenses</li>
</ul>
<ul class="category-list ">
<p>Industry</p>
<li class="">Avation</li>
<li class="">Software</li>
<li class="">Mobile</li>
<li class="">Cars</li>
</ul>
<ul class="category-list">
<p>Job Title</p>
<li class="">UI Developer</li>
<li class="">UX Developer</li>
<li class="">Designers</li>
<li class="">Web Developers</li>
</ul>
<ul class="category-list">
<p>Tenure</p>
<li class=""> 5 years</li>
<li class="">< 5 years</li>
<li class="">> 5 years</li>
<li class="">10 years</li>
<li class="">1 year</li>
</ul>
<ul class="category-list ">
<p>Seniority Level</p>
<li class="">Team Lead</li>
<li class="">Juniour Employee</li>
<li class="">Intern</li>
<li class="">Director</li>
<li class="">CEO</li>
</ul>
</div>
This are sub-category list.
I was wanting to make something like when I click on the Company Sub category of Company will show and other sub-categories remain hidden. and when I click on the Industry , Industry subcategory will show and other will be hidden. Same goes for every category. Something like tab effect. I can do this by adding classes on each categories and sub-categories and giving .show() and .hide() functions. but it will huge to add unique classes. Also I may add more categories and sub categories later. So is there any good way to make this work how I describe ? If you need to alter(add any class or ID) anything to make this work that will be fine.
Any help will be appreciated. I am really suffering with this.

What you can do is setting a #hash in every tag of you category menu like:
<li class="">
Company
</li>
Set the id corresponding on in your "main category list" like :
<ul class="segmentation-list " id="company">
<p>Company</p>
Then set an event on each tag, detect the #hash and show only the right div. A little research on something called the web could have helped you. I'm not gonna give you the complete code, try doing it yourself if you don't want other downvoting your question.

Twitter Bootstrap - Scrollspy ignore ID

I have a navigation on my site where the last link opens a modal.
Scrollspy is working fine but I don't want it to highlight the last element that opens the modal in any case.
Is there any way to do so?
<nav>
<ul class="nav">
<li class="current">
Home
</li>
<li>
Leistungen
</li>
<li>
Preise
</li>
<li>
Referenzen
</li>
<li>
Kontakt
</li>
</ul>
</nav>

I've found a solution without adding extra markup, but this is not so beautiful.
The scrollspy highlights the menu item only when the <a> contains the href attribute (at least, in Bootstrap 3.x). So if there's no href, the menu item will never be highlighted.
I've found an extension for the Bootstrap's scrollspy JS to exclude some items ID here, but this is for the 2.x version.
A solution for your problem may be :
<nav>
<ul class="nav">
<li class="current">
Home
</li>
<li>
Leistungen
</li>
<li>
Preise
</li>
<li>
Referenzen
</li>
<li>
<a data-toggle="modal" data-target="#contact">Kontakt</a> <!-- See http://getbootstrap.com/javascript/#modals-usage -->
</li>
</ul>
</nav>

How to remove existing menu items

I created menu using fg.menu.js once its loaded I want to remove the unwanted menu for which user dont have access.
for eg:-
<ul>
<li> menu1
<ul>
<li id="8000610">Test1
</li>
<li id="20247">Test2
</li>
<li id="8000526">Test3
</li>
</ul>
</li>
</ul>
Now after loading the menu I want to remove the Test2
Thanks in advance

If you use jQuery, it's as simple as $('#20247').remove();
With vanilla JS it's
element = document.getElementById("element-id");
element.parentNode.removeChild(element);
Also, use search.

Categories

Resources