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!
Related
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
I'm trying to developp a sidebar of a documentation who it links to elements on th same page
<div class="mt-6">
<li class="relative">
<router-link class="menuItem-active-link" to="#users">
{{$t('navigation.users')}}
</router-link>
</li>
<li class="relative">
<a href="#advanced" class="menuItem-active-link" >
{{$t('navigation.advanced')}}
</a>
</li>
</div>
when I use the a tag I can navigate between each elements but I didn't know how styling the active link
And when I use router-link the URL change but the page stay on the current element, it does'nt go to the specified element on to attribute. And with router-link I can styling the active link easly:
.router-link-exact-active.menuItem-active-link{
background-color: cyan;
}
Have you any idea to solve this problem ?
This should work
<router-link :to="{ hash: '#users' }">{{ $t('navigation.users') }}</router-link>
Similar to this answer.
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>
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.
I would like to change the active pill/tab on document load. I know you can set the active pill like I have below but for other reasons I want to change it after document load. I have tried various bits of JS but nothing seems to work. Here's the HTML and JS (I have also tried replacing data-toggle="pill" with data-toggle="tab" below and still doesn't work).
<div>
<ul class="nav nav-pills pillstyle">
<li class="active tabstyle"><a data-toggle="pill" href="#apple">Apple</a></li>
<li class="tabstyle"><a data-toggle="pill" href="#banana">Banana</a></li>
<li class="tabstyle"><a data-toggle="pill" href="#pear">Pear</a></li>
<li class="tabstyle"><a data-toggle="pill" href="#orange" >Orange</a></li>
</ul>
</div> <!-- nav pills close -->
<div class="tab-content">
<div id="apple" class="tab-pane fade in active"> `
.... content of tabs.
JS
$(document).ready(function(){
$('#banana').tab('show');
});
or
$(document).ready(function(){
$('#banana').pill('show');
});
You just need to change your jQuery selector to address the a element instead of the tab-pane div.
$(document).ready(function(){
$('a[href="#banana"]').tab('show');
});
If you need, you can find more detailed description about bootstrap tabs in the official documentation.
#Stu Here you go.
HTML:
Assign an ID myTab to UL element.
<ul class="nav nav-pills pillstyle" id="myTab">
JS:
$(function () {
$('#myTab a[href="#banana"]').tab('show');
});
Also refer to Bootstrap documentation on selecting different elements on load here. It will give you better understanding.
http://getbootstrap.com/2.3.2/javascript.html#tabs
Working demo: https://jsfiddle.net/tf9k9j27/
Note: Just to answer your trial and error.
You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling. (From bootstrap docs. read more to get better clarity)