When hovering over the label area, the entire rectangle will be highlighted

Could someone please assist with highlighting the entire row of the parent for the drop down feature? In the given scenario, level1 and level23 should be highlighted like the child items are. The goal is to highlight the entire row with the entire width. Additionally, if it is the last child, a bullet should be added next to it. For parents, the entire row should be highlighted, while children without any further items should have a square bullet next to them. Any help with these two requirements would be greatly appreciated. I am new to web UI technologies and have spent a lot of time trying to make this work. Thank you in advance for any assistance.

<div class="row">
      <div class="col-md-3">
          <div class="well">
              <div>
                  <ul class="nav">
                      <li>
                          <span class="glyphicon glyphicon-plus"></span><label label-default="" class="tree-toggle nav-header">Level1</label>
                          <ul class="nav tree" style="display: none;">
                              <li><a href="">Level21</a>
                              </li>
                              <li><a href="">Level22</a>
                              </li>

                              <li>
                            <span class="glyphicon glyphicon-plus"></span><label label-default="" class="tree-toggle nav-header">Level23</label>
                            <ul class="nav tree" style="display: none;">
                              <li><a href="">Level31</a>
                              </li>
                              <li><a href="">Level32</a>
                              </li>
                            </ul>
                          </li>

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

Answer №1

To achieve a full-width background color, you will need to make some changes to the HTML structure. You can wrap the elements level1 and level23 in a div like this:

<div class="header-row"><span class="glyphicon glyphicon-plus"></span><label label-default="" class="tree-toggle nav-header">Level1</label></div>

Additionally, you should include some additional CSS:

 .nav > li > .header-row:hover,
nav > li > .header-row:active{
 text-decoration: none;
  background-color: #000;   
}

Make sure to adjust your toggle JavaScript code as well:

$(this).parent().parent().children('ul.tree').toggle(200);

For a demonstration, you can check out this fiddle: http://jsfiddle.net/wshm6d5n/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Looking to display a page header alongside an image on the same page

I'm currently learning React.js and working on my very first app. As someone new to frontend development, I am aiming to have a header design similar to that of popular websites like StackOverflow or YouTube, where an image or icon is positioned just ...

Using Jquery to verify an ajax server connection

Currently, I'm in the process of developing a web application using JQuery. One challenge I have encountered is ensuring that the code has access to the server before proceeding with any further actions. Below is the function I am currently using: fun ...

Ways to dynamically add a JavaScript file into a webpage

In an attempt to dynamically load a JavaScript file, I utilized a div element with a specific class name to contain the verification script. The script is designed to check if the intended JavaScript file has been loaded and, if not, to generate a new ex ...

Sending AJAX Responses as Properties to Child Component

Currently, I am working on building a blog using React. In my main ReactBlog Component, I am making an AJAX call to a node server to get back an array of posts. My goal is to pass this post data as props to different components. One specific component I h ...

Is there a more efficient way to handle post data without increasing its size when encoding JSON within a URI

I have a significant amount of data to post, and it needs to be minimized for performance reasons. Initially, my data consists of JavaScript objects which I then convert to JSON format before sending it via POST request. The issue is that my data include ...

Convert the contents of the uploaded file to a JSON format

I've recently started using angularjs for file uploads and came across this helpful model on github: https://github.com/danialfarid/angular-file-upload The file upload process is working smoothly for me. However, I'm facing a challenge after upl ...

The CSS styling is not applying correctly to a particular page

Having a minor CSS issue here. I am attempting to change something for a specific page or post, like in the case of wanting to change the background color of the entry content of page number 2458. I've managed to get that working with the following co ...

I am looking to trigger the change event from within the click event in Angular

My objective involves detecting when the cancel button is clicked while a file is being uploaded. I am trying to accomplish this by triggering the click event, then monitoring for the change event. If the change event occurs, the document will be uploaded. ...

Elements are randomly glitching out with CSS transitions in Firefox

Chrome is working perfectly for me, but when I switch to Firefox it behaves differently than expected I am attempting to create a simple animation (utilizing transitions) that continuously runs on mouseover and smoothly returns to the starting position on ...

Guide on implementing vuechartkick in a Nuxt.js project

In the directory /plugin/vue-chartkick, I created a vuechartkick plugin. import Vue from 'vue' import Chartkick from 'vue-chartkick' import Chart from 'chart.js' Vue.use(Chartkick.use(Chart)) This is the nuxt template sectio ...

storing data in local storage using JavaScript

As someone new to coding, my aim is to create a basic "daily planner" page where users can input text on different lines. I've been attempting to use local storage for this task, but seem to be running into some issues. I've experimented with get ...

Inadequate text alignment

Trying to create a header mockup for a website featuring branding elements like a logo and brand name. Utilizing Angular.js for the webpage development process, incorporating a URL for the logo image from an online source. Encountering alignment issues th ...

Utilize preg_replace to insert your own website ahead of each hyperlink

In need of a solution for my project which involves fetching website content and modifying the HTML code. All links on the website must be replaced with my own links, but I encountered an issue with classes being assigned to some links. Initially, I tried ...

Angular.js - organizing a list of items and preserving the outcome

Here is a compilation of randomly arranged items: <ul class="one" drag-drop="page.items"> <li ng-repeat='item in page.items|orderBy:page.random as result'> <img ng-src="http://placecage.com/{{item.id*100}}/{{item.id*100}}"& ...

Incorporating a radio button input into the parent component in a React application

The main component stores all the state data. Whenever there is a change in any input field, the function myChangeHandler is triggered and updates the state accordingly. myChangeHandler(event) { this.setState({ [event.target.name]: event.target.value }) ...

Why isn't the Head component producing any visible results in the DOM when using Next.js?

Struggling to get the <Head> component working, but it's not reflecting any changes in the DOM. Take a look at my page.js: import Head from 'next/head' export default function Home() { return ( <> <Head> & ...

Switch the checked status of an input dynamically using jQuery function

It seems like I might be overlooking something quite obvious, but I can't figure out why this jquery function is behaving inconsistently. HTML: <label id="income_this_tax_year"> <div class="left"> <p>Have you had Self-Employm ...

Attaching an event listener to elements with a specified Class name

Currently facing a challenge where I am trying to implement a function that captures click events on squares. The objective is to capture the click event on every button with the square class. import { Component, OnInit } from '@angular/core&apos ...

Unable to apply the CSS styles on the webpage

I'm having trouble adjusting the CSS for a specific div with the class .cropper inside a component named image-cropper, and I can't figure out why it's not taking effect. Here is an image of the particular div. https://i.sstatic.net/spdJc. ...

One issue that may arise is when attempting to use ngOnDestroy in Angular components while rearranging user transitions

Encountered an issue recently with Angular - when the user navigates from component A to component B, component A remains active unless ngOnDestroy is triggered. However, if the user visits component B before going to component A and then leaves, ngOnDes ...