问题描述:

I am usually quite familiar with specificity and have no issue styling nested components. I have embarrassingly spent hours trying to access the "ul#dropMe" dropdown list in the below code. The code is essentially a bootstrap dropdown using a jquery scrolling plugin. My suspicion is that the JS throws the specificity off because after doing Inspect Element on the run webpage a div wrapper forms around the "ul#dropMe" to account for the scrollbar. I have tried numerous targeting css lines factoring in and out the new wrapper including "ul#dropMe", "div.scroll-wrapper ul#dropMe", etc.

If someone can provide insight I would greatly appreciate it.

 <!DOCTYPE html>

<html>

<head>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<link rel="stylesheet" href="scrolldown.css" >

<link rel="stylesheet" href="jquery.scrollbar.css">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">

<script src="https://use.fontawesome.com/394d590898.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="jquery.scrollbar.min.js"></script>

<script src="scrolldown.js"></script>

</head>

<body>

<div class="container" id="dropdownContainer">

<div class="dropdown" id = "drop">

<button class="dropdown-toggle" id="dropdownButton" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">

<div id="buttonText">Select</div>

<i class="fa fa-angle-down angleDownIcon" ></i>

</button>

<ul class="dropdown-menu dropdownMenu scrollbar-inner" id="dropMe" aria-labelledby="dropdownMenuSelecter">

<li><a class="ddSelect"> Lorem</a></li>

<li><a class="ddSelect"> Ipsum</a></li>

<li><a class="ddSelect"> Dolor</a></li>

<li><a class="ddSelect"> Sit</a></li>

<li><a class="ddSelect"> Amet</a></li>

<li><a class="ddSelect"> Ipsum</a></li>

<li><a class="ddSelect"> Dolor</a></li>

<li><a class="ddSelect"> Sit</a></li>

<li><a class="ddSelect"> Amet</a></li>

<li><a class="ddSelect"> Ipsum</a></li>

<li><a class="ddSelect"> Dolor</a></li>

<li><a class="ddSelect"> Sit</a></li>

<li><a class="ddSelect"> Amet</a></li>

</ul>

</div>

</div>

</body>

</html>

The CSS

.container

{

margin-top: 20px;

}

/***********************/

#dropdownContainer

{

height: 300px;

width: 800px;

margin-left: 50px;

}

.dropdownLabel

{

margin: 10px 10px 0px 16px;

font: bold 14px 'Roboto',Arial;

color: #555555;

}

#dropdownButton

{

height: 34px;

width: 173px; /*width set for demo*/

max-width: 33%;

padding: 0px 10px 0px 10px;

margin:0px 10px 0px 16px;

background-color: #F7F7F7;

border: solid 1px #DBDBDB;

border-radius: 3px;

color: #555555;

}

#dropdownButton div

{

display: inline-block;

height: 34px;

line-height: 34px;

font: 14px 'Roboto',Arial;

padding-top: 7px;

float: left;

color: #999999;

}

#drop #dropMe

{

position: absolute;

width: 190px;

height: 140px;

padding: 0px 8px 0px 0px;

margin: -34px 0px 0px 16px;

border-style: solid;

border-width: 5px;

border-color: rgb(219,219,219);

border-radius: 3px;

background-color: rgb(255,255,255);

box-shadow: 0px 9px 13px 0px rgba(0,0,0,0.2);

z-index: 1;

overflow: auto;

background-color: red;

}

ul.dropdownMenu li

{

display: block;

height: 34px;

line-height: 34px;

width: 171px;

}

/*didnt do padding top up because its autoset to fill the height of 34px which should be it.*/

ul.dropdownMenu li a

{

vertical-align: middle;

height: 34px;

padding: 7.5px 10px 7.5px 10px;

margin: 0px 0px -16px 0px;

font: 14px "Roboto",Arial;

color: #555555;

}

ul.dropdownMenu li a

{

height: 34px;

}

.dropdownMenu li a:hover

{

background-color: #F7F7F7;

}

.fa.fa-angle-down.angleDownIcon, .fa.fa-angle-up.angleUpIcon

{

display: inline;

float: right;

margin-right:0px;

font-size: 19px;

text-align: right;

padding-top: 7px;

color: #999999;

}

The JS

jQuery(document).ready(function(){

jQuery('.scrollbar-inner').scrollbar();

});

$("a").click(function(event)

{

if ($(event.target).attr('class') == "ddSelect")

{

(document.getElementById('buttonText').innerHTML) = (event.target.textContent);

}

});

相关阅读:
Top