- iOS/Objective-C 元类和类别
- objective-c - -1001 错误,当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
我正在尝试根据出现的需求调整脚本。它是一个显示 Accordion 的水平导航菜单。
一切都很好,但问题是我希望 Accordion 通过其子菜单之一的 onclick 事件关闭。
$(function() {
$('.dropdown-menu').on('click', function(e) {
e.stopPropagation();
});
var Accordion = function(el, multiple) {
this.el = el || {};
this.multiple = multiple || false;
// Variables privadas
var links = this.el.find('.link');
// Evento
links.on('click', {
el: this.el,
multiple: this.multiple
}, this.dropdown)
}
Accordion.prototype.dropdown = function(e) {
var $el = e.data.el;
$this = $(this),
$next = $this.next();
$next.slideToggle();
$this.parent().toggleClass('open');
if (!e.data.multiple) {
$el.find('.submenu').not($next).slideUp().parent().removeClass('open');
};
}
var accordion = new Accordion($('#accordion'), false);
$(".cls-menu").on('click', function() {
$('.dropdown-menu').dropdown('toggle');
});
});
.accordion {
width: 100%;
max-width: 360px;
padding: 0px;
background: #FFF;
color: #000000;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.accordion .link {
cursor: pointer;
display: block;
padding: 15px 15px 15px 42px;
color: #000000;
font-size: 14px;
font-weight: 700;
border-bottom: 1px solid #CCC;
position: relative;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.accordion li:last-child .link {
border-bottom: 0;
}
.accordion li i {
position: absolute;
top: 16px;
left: 12px;
font-size: 18px;
color: #000000;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.accordion li i.fa-chevron-down {
right: 12px;
left: auto;
font-size: 16px;
}
.accordion li.open .link {
color: #000000;
}
.accordion li.open i {
color: #000000;
}
.accordion li.open i.fa-chevron-down {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
/**
* Submenu
-----------------------------*/
.submenu {
padding: 0px;
display: none;
background: #FFF;
font-size: 14px;
}
.submenu li {
border-bottom: 1px solid #FFF;
}
.submenu a {
display: block;
text-decoration: none;
color: #000000;
padding: 12px;
padding-left: 42px;
-webkit-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.submenu a:hover {
background: #FFF;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Departamentos<span class="caret"></span></a>
<ul class="dropdown-menu pull-right">
<ul id="accordion" class="accordion">
<li>
<div class="link"><i class="fa fa-database"></i>Web Design<i class="fa fa-chevron-down"></i></div>
<ul class="submenu">
<li><a href="#" class="cls-menu">Photoshop</a></li>
<li><a href="#" class="cls-menu">HTML</a></li>
<li><a href="#" class="cls-menu">CSS</a></li>
</ul>
</li>
<li>
<div class="link"><i class="fa fa-code"></i>Coding<i class="fa fa-chevron-down"></i></div>
<ul class="submenu">
<li><a href="#" class="cls-menu">Javascript</a></li>
<li><a href="#" class="cls-menu">jQuery</a></li>
<li><a href="#" class="cls-menu">Ruby</a></li>
</ul>
</li>
</ul>
</ul>
</li>
最佳答案
解决方法:
function HtmlMenu() {
$('.dropdown-menu').on('click', function(e) {
e.stopPropagation();
});
var Accordion = function(el, multiple) {
this.el = el || {};
this.multiple = multiple || false;
// Variables privadas
var links = this.el.find('.link');
// Evento
links.on('click', { el: this.el, multiple: this.multiple }, this.dropdown)
}
Accordion.prototype.dropdown = function(e) {
var $el = e.data.el;
$this = $(this),
$next = $this.next();
$next.slideToggle();
$this.parent().toggleClass('open');
if (!e.data.multiple) {
$el.find('.submenu').not($next).slideUp().parent().removeClass('open');
};
}
var accordion = new Accordion($('#accordion'), false);
$("a.cls-menu").on("click", function() {
$(".dropdown-toggle").dropdown("toggle");
});
}
关于javascript - Bootstrap 水平导航加 Accordion ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50245775/
这是一个复杂的查询,我希望用一条语句实现它,而不是必须在 PHP 中处理数组值。 要达到预期的输出: User Jobs Total John D. 5 $1245.67 Ma
SELECT B. * , SC.cate_name, ( CASE WHEN special_offer_type = 'Fixed Value' THEN B.price - special_o
关于将 booksleeve 与 protobuf-net 结合使用,我有一些相当基本的问题。现在我已经实现了一个单例类来管理连接,所以我多次重复使用与 recommended 相同的连接。 .现在我
我想要一个客户端加/减系统,用户可以单击加号,值会增加 1,减号,值会减少 1,该值永远不应该低于零,并且应该从 0 开始.有没有办法在 jquery 中简单地做到这一点?所有 jquery 插件都会
我正在使用加号和减号按钮更新我的产品数量,这很有效,但我的问题是因为我在一个容器中有多个产品,它正在更新所有产品的数量。这是代码:
我需要在大小相等的小整数数组上做大量简单的代数运算。这些操作仅包括三种:(i) 添加数组和 (ii) 按元素减去数组,以及 (iii) 比较一个数组中的所有元素是否不小于/大于另一个数组中的对应元素。
我对 javascript 很陌生,但我需要一种 JS 方式来在单击按钮时增加/减少输入字段中的值。我已成功将值设置为显示 0,但当我单击“添加”按钮时,它不会增加。 以下是 html 和 JS 代码
我可以在输入字段中添加/减去一个数字。 但是,我希望结果显示在中而不是在input中字段。 我尝试使用innerHTML自己完成它但无法让它发挥作用。 $(function() { $('.min
我的页面上有一个加号/减号 jquery 选择器。当页面加载或数字达到 1 时,我希望减号按钮变灰以模拟非事件状态。这是我的代码和 fiddle https://jsfiddle.net/pgxvhs
我如何加/减用户输入的十六进制数? 喜欢: basehex = input() sechex = input() sum = hex(basehex - sechex) print(sum) 我得到:
本文实例讲述了python简单实现矩阵的乘,加,转置和逆运算。分享给大家供大家参考,具体如下: 使用python完成矩阵的乘,加,转置和逆: ?
我输入的一些文本包括几个上下箭头(↑ 和 ↓),以及一个加号/减号 (±)。 这些特殊字符以 HTML ASCII 输入:↑ ↓ ±。在 POST 上,HTML 在保存到 MySQL 表之前使用 ht
我正在尝试配置 Live Gamer Portable 2 Plus 的输出引脚以降低帧速率。通过 GraphStudioNext,我可以通过捕获引脚访问配置并更改帧速率。 但是,当我通过 API 在
我正在尝试使用批处理文件创建任意时间。我试图从我的代码中减去设置值(例如1天,1个月和2000年),以显示系统时间减去前面所述的设置值。对于小时和分钟,我要减去10小时和10分钟(在代码中显示为不同的
我想建立一个 5 位向上/向下计数器。当我能让模拟工作时,我会更乐意购买零碎的东西来构建它。到目前为止,我使用的是 ATmega8,但坦率地说,只要组件相当便宜,任何解决方案都适合我。 我在网上找到了
使用 ng-repeat 时在数字输入字段上添加加/减切换的最佳方法是什么 我这样试过,但没用: - + vm.plus = f
我正在尝试弄清楚如何将 UNION 与相同的 JOIN 一起使用,而不是陷入 #2014 - 命令不同步。 我创建了四个简单的表格并为它们编写了简化的代码。主要想法是获得名字中带有“最佳”字样的每把剑
这个问题已经有答案了: Is floating point math broken? (33 个回答) 已关闭 9 年前。 我有一个简单的函数,应该生成 1000 个不同的元素: var start
我目前正在编写一个响应式设计,我正处于移动导航折叠的地步。 为此,我创建了两个 div 和一个 ul。 ul 包含我的 nav 元素,而 div 将显示移动设备和平板电脑下拉菜单的导航图像。 HTML
我为 woocommerce 单个产品页面创建了一个加/减数量按钮。创建了一个新的数量-input.php " min="" max="" name="" value="" ti
我是一名优秀的程序员,十分优秀!