0
ブートストラップのドロップダウンメニューに似たメニューを作成しましたが、小さな違いはスライドせず代わりに左にスライドしますこれはうまくいきます。しかし問題は、別のメニュー（スライドやドロップダウン）をクリックしたときに閉じなければならないということですが、別のメニューリンク（同じスライドサイドメニューの子でも親でもない）をクリックしようとすると機能しません。別のメニューをクリックするとドロップダウンメニューが消えるので消えません。ただし、ウィンドウのどこかをクリックするとメニューが閉じます。私がブートストラップ・プラグインから取ったコードを見てみましょう。 ブートストラップclearMenusを使用してメニューを閉じて編集しましたが、問題は解決しません。スニペットとして、両方のカテゴリボタンをクリックすると重複して表示され、別のカテゴリをクリックすると他の開いているカテゴリーを閉じる必要があることがわかります。 別のスライドメニューまたはドロップダウンメニューをクリックしたときにスライドショーメニューが非表示にならない
var toggle = '[data-toggle="slideside"]'
\t \t \t var Slideside = function (element) {
\t \t \t \t $(element).on('click', this.toggle)
\t \t \t }
function getParent($this) {
\t \t \t \t var selector = $this.attr('data-target')
\t \t \t \t if (!selector) {
\t \t \t \t selector = $this.attr('href')
\t \t \t \t selector = selector && /#[A-Za-z]/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
\t \t \t \t }
\t \t \t \t var $parent = selector && $(selector)
\t \t \t \t return $parent && $parent.length ? $parent : $this.parent()
\t \t \t }
\t \t \t $(".slideside-toggle").on('click',function(e){
\t \t \t \t e.preventDefault();
\t \t \t \t var expand ;
\t \t \t \t $this = $(this);
\t \t \t \t $parent = getParent($this);
\t \t \t \t $slide = $this.next('ul').children('.after-slideside');
\t \t \t \t if($this.attr('aria-expanded') === 'true')
\t \t \t \t \t expand = 'false'; \t
\t \t \t \t else
\t \t \t \t \t expand = 'true';
\t \t \t \t
\t \t \t \t $this.attr('aria-expanded', 'true');
\t \t \t \t $slide.toggleClass("open");
\t \t \t });
\t \t \t $(document).on('click',clearMenus);
\t \t \t function clearMenus(e){
\t \t \t \t $(toggle).each(function() {
\t \t \t \t var $this = $(this)
\t \t \t \t var $parent = getParent($this)
\t \t \t \t var $slide \t \t = $this.next('ul').children('.after-slideside');
\t \t \t \t if (!$slide.hasClass('open')) return
\t \t \t \t if (e && e.type == 'click' && /input|textarea/i.test(e.target.tagName) && $.contains($parent[0], e.target)) return
\t \t \t \t if (e.isDefaultPrevented()) return
\t \t \t \t $this.attr('aria-expanded', 'false')
\t \t \t \t $slide.removeClass('open')
\t \t \t \t })
\t \t \t }.slideside-toggle i.fa-angle-right{
\t \t \t \t padding-right:0;
\t \t \t }
\t \t \t li.after-slideside{
\t \t \t \t position:absolute;
\t \t \t \t right:-250px;
\t \t \t \t width:250px;
\t \t \t \t background-color:ghostwhite;
\t \t \t \t transition: all 0.35s linear;
\t \t \t }
\t \t \t nav li.open.after-slideside > a{
\t \t \t \t padding-left:8px;
\t \t \t \t text-align:center;
\t \t \t \t border-bottom:1px solid #ececec;
\t \t \t \t color:#acacac;
\t \t \t }
\t \t \t nav li.open.after-slideside >ul{
\t \t \t \t padding-left:0;
\t \t \t }
\t \t \t nav li.open.after-slideside >ul>li{
\t \t \t \t border-bottom:1px solid #ececec;
\t \t \t }
\t \t \t .open.after-slideside{
\t \t \t \t right:0;
\t \t \t \t transition:all 0.35s linear;
\t \t \t \t z-index:1;
\t \t \t }<link href="http://www.hetrotech.in/css/color.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
<ul class="nav sidebar-nav">
<li class="divider"></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-sliders"></i> Account<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-header">Not Logged In ?</li>
<li class="button"><button class="btn btn-primary" onClick="window.location.href='user.html';"><i class="fa fa-fw fa-sign-in"></i>Login</button></li>
</ul>
</li>
<li class="before-slideside" id="category">
<a href="#" class="slideside-toggle" data-toggle="slideside" aria-expanded="false"><i class="fa fa-fw fa-list-alt"></i>Category 1 <span class="pull-right"><i class="fa fa-fw fa-angle-right"></i></span></a>
<ul class="slideside-menu">
<li class="after-slideside">
<ul class="slideside-menu" role="menu">
<li class="dropdown-header">20% Sale</li>
<li><a href="#">Product1</a></li>
<li>
<a href="#" class="slideside-toggle" data-toggle="slideside" aria-expanded="false">Product2 <span class="pull-right"><i class="fa fa-fw fa-angle-right"></i></span></a>
<ul class="slideside-menu">
<li class="after-slideside">
<ul class="slideside-menu" role="menu">
<li class="dropdown-header">40% Sale</li>
<li><a href="#">Product1</a></li>
<li><a href="#">Product2</a></li>
<li><a href="#">Product3</a></li>
<li><a href="#">Product4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Product3</a></li>
<li><a href="#">Product4</a></li>
</ul>
</li>
</ul>
</li>
<li class="before-slideside" id="category">
<a href="#" class="slideside-toggle" data-toggle="slideside" aria-expanded="false"><i class="fa fa-fw fa-list-alt"></i>Category 1 <span class="pull-right"><i class="fa fa-fw fa-angle-right"></i></span></a>
<ul class="slideside-menu">
<li class="after-slideside">
<ul class="slideside-menu" role="menu">
<li class="dropdown-header">20% Sale</li>
<li><a href="#">Product1</a></li>
<li>
<a href="#" class="slideside-toggle" data-toggle="slideside" aria-expanded="false">Product2 <span class="pull-right"><i class="fa fa-fw fa-angle-right"></i></span></a>
<ul class="slideside-menu">
<li class="after-slideside">
<ul class="slideside-menu" role="menu">
<li class="dropdown-header">40% Sale</li>
<li><a href="#">Product1</a></li>
<li><a href="#">Product2</a></li>
<li><a href="#">Product3</a></li>
<li><a href="#">Product4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Product3</a></li>
<li><a href="#">Product4</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
をして.dropdown-スライド側を.afterするために、私の問題の半分は持っています解決されましたが、問題が残っているのは、ドロップダウンメニューをクリックすると隠されないということです。 – sagar
今すぐ編集してください一度チェックしてください –