<ul>
<li>main list
<ul>
<li>sub list A
<ul>
<li>sub list A-1</li>
<li>sub list A-2</li>
<li>sub list A-3</li>
<li>sub list A-4</li>
<li>sub list A-5</li>
</ul>
</li>
<li>sub list B
<ul>
<li>sub list B-1</li>
<li>sub list B-2</li>
<li>sub list B-3</li>
</ul>
</li>
<li>sub list C
<ul>
<li>sub list C-1</li>
<li>sub list C-2</li>
<li>sub list C-3</li>
</ul>
</li>
</ul>
</li>
</ul>
I am a Korean.
So I can not speak English well.
Please excuse, even if I do not understand my words.
I have a list of one.
This list has a vertical structure.
But I want to change it horizontally.
In order to be listed in a horizontal list, what should I do?
I can use a style sheet only.
ul li {}
ul li ul li {}
ul li ul li ul li {}
Please design like the example below.
main list - sub list A - sub list A-1, sub list A-2, sub list A-3 ..
Thank you.
You're looking for this if I understand you:
http://jsfiddle.net/Robuuust/Dxv6C/1/
css: ul {display:inline-block}
Related
I'm recently using cypress and I want to get the array of list but I just want the to get <li> under the class "list" and not including the other children of <li>
I'm using
cy.get('.list >li')
but I'm also getting the children <li> under Home.
<ul class="list">
<li>Home</li>
<ul>
<li>Another One</li>
<li>Another Two</li>
</ul>
<li>Page</li>
<li>Hello</li>
<li>Hi</li>
</ul>
you have two ways to do this
get only li children of parent
cy.get('.list').children('li')
get children by level in dom
cy.get('.list > li')
.its('length')
.should('eq', 2)
You can also use the combination of selector and text using contains. In this way you will only get the intended li element.
cy.contains('li', 'Home')
You can do something like this as well:
cy.get('ul.list > li').each(($ele) => {
cy.log($ele.text()) //prints Home Page Hello Hi
})
Created a small POC from your HTML and this is what I got:
I want to click the third value(embedded li element) given the below code snippet, any help?
some-menu-title-value
some-menu-item-default-value
some-menu-item-optional-value
Assuming that the element will always be the 2nd <li> element, you can use:
element.all(by.css('li')).get(1).click();
If there are other <li> elements on the page, you can refine the css selector like:
element.all(by.css('li.some-menu-items')).get(1).click();
Its hard to tell from the HTML provided, but if your elements are nested like so:
<div class="myClass"
<li class="myClass"
<li class="myClass"</li>
</li>
</div>
Then you could do element(by.css('div>li>li')).click(); to click the inner <li> element.
I have a code like this:
<div id="left">
<div id="leftNav">
<div id="leftNavContainer">
<div id="refinements">
<h2>Department</h2>
<ul id="ref_2975312011">
<li>
<a href="#">
<span class="expand">Pet Supplies</span>
</a>
</li>
<li>
<strong>Dogs</strong>
</li>
<li>
<a>
<span class="refinementLink">Carriers & Travel Products</span>
<span class="narrowValue"> (5,570)</span>
</a>
</li>
(etc...)
Which I'm scriping like this:
html = file
data = Nokogiri::HTML(open(html))
categories = data.css('#ref_2975312011')
#categories_hash = {}
categories.css('li').drop(2).each do | categories |
categories_title = categories.css('.refinementLink').text
categories_count = categories.css('.narrowValue').text[/[\d,]+/].delete(",").to_i
#categories_hash[:categories] ||= {}
#categories_hash[:categories]["Dogs"] ||= {}
#categories_hash[:categories]["Dogs"][categories_title] = categories_count
end
So now. I want to do the same but without using #ref_2975312011 and "Dogs".
So I was thinking I could tell Nokogiri the following:
Scrap the li elements (starting from the third one) that are right
below the li element which has the text Pet Supplies enclosed by a link and a span tag.
Any ideas of how to accomplish that?
The Pet Supplies li would be:
puts doc.at('li:has(a span[text()="Pet Supplies"])')
The following sibling li's would be (skipping the first one):
puts doc.search('li:has(a span[text()="Pet Supplies"]) ~ li:gt(1)')
I have a html fragment that looks like the following;
<div class="sideBar">
<ul>
<li class="test testlist">
<div>test 1</div>
<ul>
<li class="test testlist"><div>sub test1</div></li>
<li class="test testlist"><div>sub test2</div></li>
</ul>
</li>
<li class="test testlist"><div>test 2</div></li>
</ul>
</div>
I need to get node list number two containing text "test 2", but when I try the following;
//div[contains(#class, 'sideBar')]//li[#class=\"test testlist\"])[2]//div
It returns node;
<li class="test testlist"><div>sub test2</div></li>
How would I go about returning node please;
<li class="test testlist"><div>test 2</div></li>
Many thanks,
C.
I'm not sure what the rule should be to get node with text "test 2".
First of all your xpath has a wrong parenthesis (copy past error):
//div[contains(#class, 'sideBar')]//li[#class=\"test testlist\"] -->)<-- [2]//div
There are two interpretation:
//div[contains(#class, 'sideBar')]//li[#class='test testlist'][2]//div"
Which will select all li (with class test testlis) descendant to the div which on second position to the parent.
Or:
(//div[contains(#class, 'sideBar')]//li[#class='test testlist'])[2]//div
Which will select the the second li (with class test testlis) of the three found.
Both is not what you like to have. Therefore try:
(//div[contains(#class, 'sideBar')]//li[#class='test testlist'][2])[2]//div
The second of the two on position two.
Or best(in my view):
//div[contains(#class, 'sideBar')]/ul/li[#class='test testlist'][2]//div"
The second li in the first direct child ul of the div .
I'm trying to do a vertical menu with dropdowns that can be activated by an arrow toggle, while still keeping the top level link active and clickable. I'm using a custom CMS so I have some constraints as far as how I can make this work.
HTML
<ul class="topnav">
<li class="tn_first">
<span></span><a class="topmenu" href="/default.asp">Home</a>
</li>
<li class="tn_mid">
<span></span><a class="topmenu" href="/listings.asp">My Listings</a>
<ul class="subnav">
<li class="sn_first">
<a class="submenu" href="#">Listing 1</a>
</li>
<li class="sn_mid">
<a class="submenu" href="#">Listing 2</a>
</li>
<li class="sn_last">
<a class="submenu" href="#">Listing 3</a>
</li>
</ul>
</li>
<li class="tn_last">
<span></span><a class="topmenu" href="/links.asp">System Pages</a>
<ul class="subnav">
<li class="sn_first">
<a class="submenu" href="#">Page 1</a>
</li>
<li class="sn_mid">
<a class="submenu" href="#">Page 2</a>
</li>
<li class="sn_last">
<a class="submenu" href="#">Page 3</a>
</li>
</ul>
</li>
</ul>
So I've got a pretty straightforward UL LI menu system. I've added to the template of the top level nav a span tag, which I wanted to use as a toggle switch. The span can be changed to anything, it's just what I have in there currently.
The issue I've run into is that given this is a template system, I have the option of putting the span in, but don't have the option to show it conditionally based on whether ul.subnav exists in the same li. So I need some way of applying display:block to the ones that actually meet this condition, then I'll just display:none the other spans by default.
I tried using this solution and it did work to a point, but it doesn't work with multiple dropdowns, it only seems to work if you have a single instance of a dropdown in your menu structure.
jQuery Toggle Dropdown Menu
and
http://jsfiddle.net/hXNnD/1/
Javascript
jQuery(document).ready(function () {
var subMenu = jQuery("li ul li");
var linkClick = jQuery("ul li").filter(":has(ul)");
subMenu.hide();
linkClick.click(function (e) {
e.preventDefault();
subMenu.slideToggle("fast");
});
});
I created another example that has 2 sub ULs so you can see where the code is falling down.
http://jsfiddle.net/BxsEX/
Hide with CSS your spans and go for: $('.topnav li:has(ul) span').show();
http://jsbin.com/ujoqek/1/edit
CSS:
.topnav li span{ display:none; }
jQ:
var arrow = ['▼','▲'];
$('.topnav li:has(ul) span').show().html( arrow[0] ).data('a',0);
$('.topnav li > ul').hide();
$('.topnav span').click(function(){
$(this).closest('li').find('ul').slideToggle();
var arrw = $(this).data('a');
$(this).html( arrow[++arrw%2] ).data('a', arrw);
});
I think this is all you wanted. I may be wrong.
$('li').each(function(){
//if we can find a UL with the class of subnav within our LI
if($(this).find('ul.subnav').length){
//find the span within this LI and give it a display block
$(this).find('span').css('display', 'block')
}else{
//otherwise, hide the span.
$(this).find('span').css('display', 'none')
}
});