want to use this HTML
instead of spartacus OOTB cms html i want to change to following html structure
<li>HOME</li>
<li>THE ASSOCIATION</li>
<ul class="sub-menu">
<li>
<a>WHO WE ARE</a>
</li>
</ul>
<li>CONTACTS</li>
<li>PRODUCTS</li>
<ul class="sub-menu">
<li>
<a>SHOES</a>
</li>
<li>
<a>UMBRELLAS</a>
</li>
</ul>
</ul>```
You need to override the OTB component and you can access Navigation menu through:
node$: Observable = this.service.getNavigationNode(
this.componentData.data$
);
data$: Observable = this.componentData.data$;
constructor(protected componentData:CmsComponentData,
protected service: NavigationService,
) { }
You can iterate node$ in template
Related
I'm making a menu, with some accordion links, that when clicked, will show more options. The problem now, is that when I click one, they all trigger.
I need to trigger only the element that has been clicked.
I've tried #click.prevent, stop, self etc and not working. Maybe I'm missing something??
<li :aria-expanded="foo">
<button id="foo-1" #click="foo = !foo" :aria-pressed="foo" :aria-expanded="foo" >
FOO
</button>
<ul v-show="foo">
<li> Accordion option </li>
</ul>
</li>
<li :aria-expanded="foo">
<button id="foo-2" #click="foo = !foo" :aria-pressed="foo" :aria-expanded="foo" >
FOO
</button>
<ul v-show="foo">
<li> Accordion option </li>
</ul>
</li>
I'm using foo as boolean type.
Any idea??
Thanks you!!
The problem is all the <li>s are bound to the same foo variable, so editing one reference affects all others.
The solution is to create separate variables for each <li>. For example, you could change foo to be an array, and bind each individually:
<template>
<li>
<button #click="foo[0] = !foo[0]">FOO</button>
</li>
<li>
<button #click="foo[1] = !foo[1]">FOO</button>
</li>
<template>
<script>
export default {
data() {
return {
foo: []
}
}
}
</script>
A parent link of a bootstrap dropdown isn't clickable by default so the link isn't working.
This is the html code:
<div class="dropdown">
<a id="item7" class="dropdown-toggle" data-toggle="dropdown" href="/mylink">MyLink</a>
<ul class="dropdown-menu">
<li class="submenuitem">
item 1
</li>
<li class="submenuitem">
item 2
</li>
</ul>
</div>
I want /myLink to clickable. How do I fix that?
Add this code to you page and parent links will work:
<script>
jQuery(function($) {
$('.dropdown > a').click(function(){
location.href = this.href;
});
});
</script>
I found that the easiest way to do it in bootstrap 4 is by deleting the "data-toggle" attribute from the parent element!
I have the
after I refresh the browser, the selected class go to the 首页, do not stay in 数据中心.
Who can help me with the issue?
my key code:
template:
<ul class="nav">
<li class="nav-item" ><router-link :to="homePath" :class="selectedIndex===0 ? 'selected' : '' " #click.native="selectedIndex=0">首页</router-link></li>
<li class="nav-item" ><router-link :to="dataCenterPath" :class="selectedIndex===1 ? 'selected' : '' " #click.native="selectedIndex=1">数据中心</router-link></li>
</ul>
script:
data(){
return {
selectedIndex: 0,
...
}
}
Whenever you refresh the page the JavaScript is reloaded and all the properties revert back to their initial values.
In your case selectedIndex is set back to 0.
To add the selected class to the link automatically when the target route is active make use of active-class prop on the ,router-link> as follows
<ul class="nav">
<li class="nav-item" ><router-link :to="homePath" active-class="selected" #click.native="selectedIndex=0">首页</router-link></li>
<li class="nav-item" ><router-link :to="dataCenterPath" active-class="selected" #click.native="selectedIndex=1">数据中心</router-link><li>
</ul>
edit
<ul class="nav">
<li class="nav-item" ><router-link :to="homePath" exact active-class="selected" #click.native="selectedIndex=0">首页</router-link></li>
<li class="nav-item" ><router-link :to="dataCenterPath" active-class="selected" #click.native="selectedIndex=1">数据中心</router-link><li>
</ul>
Make use of exact prop on home router link
im trying to do a big dropdown menu but when i click on a main dropdown-toggle TEXT it only highlight but nothing happen... - check the picture
<li class="dropdown dropdown-large">
TEXT
<ul class="dropdown-menu dropdown-menu-large row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Glyphicons</li>
<li>Available glyphs</li>
<li class="disabled">How to use</li>
<li>Examples</li>
<li class="divider"></li>
<li class="dropdown-header">Dropdowns</li>
<li>Example</li>
<li>Aligninment options</li>
<li>Headers</li>
<li>Disabled menu items</li>
</ul>
</li>
</ul>
</li>
Only Highlight but do not show dropdown
I think this may be causing the problem : TEXT You don't want your toggle button to be a direct link, instead use the intended Bootstrap class
Check this JSFiddle, I think this is what you are trying to do : Answer
If this answer solves your problem, please do accept it.
A drop down list appears on mouse over on a link, so there is no need to click to open a dropdown list.
<ul id="XenForoUniq4">
<li class="PrefixGroup">
<h3>some header</h3>
<ul>
<li class="PrefixOption">option 1
</li>
<li class="PrefixOption">option 2
</li>
</ul>
</li>
<li class="PrefixOption selected">
no option selected
</li>
</ul>
How to select one of the elements in such case?
There is an Actions class in Selenium that exposes a MoveToElement() method that allows you to hover the link in order to make visible the list.