单击另一个幻灯片菜单或下拉菜单时，幻灯片菜单不会隐藏

Question

我创建了一个类似于bootstrap下拉菜单的菜单，不同之处在于，它没有向下滑动，相反，它在点击时向左侧滑动，这很正常。但问题是，我想要在单击另一个菜单（滑动侧或下拉菜单）时必须关闭它，但当我尝试单击另一个菜单链接（不是同一个滑动菜单的子项或父项）时它不起作用。当点击另一个菜单时，下拉菜单消失，它不会消失。但是，如果我在窗口的任何地方点击外面它会关闭菜单。看看我从bootstrap插件中获取的代码。 我已经使用bootstrap clearMenus函数关闭菜单并进行了编辑，但它无法解决我的问题。在我的代码片段中，您将看到我是否点击了两个类别按钮，它们将重叠，我想如果我点击另一个类别，那么它必须关闭另一个打开的类别。

var toggle   = '[data-toggle="slideside"]'
			  var Slideside = function (element) {
				$(element).on('click', this.toggle)
			  }
function getParent($this) {
				var selector = $this.attr('data-target')
				if (!selector) {
				  selector = $this.attr('href')
				  selector = selector && /#[A-Za-z]/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
				}
				var $parent = selector && $(selector)
				return $parent && $parent.length ? $parent : $this.parent()
			}
			$(".slideside-toggle").on('click',function(e){
				e.preventDefault();
				var expand ;
				$this = $(this);
				$parent = getParent($this);
				$slide = $this.next('ul').children('.after-slideside');
				if($this.attr('aria-expanded') === 'true')
					expand = 'false';	
				else
					expand = 'true';
				
				$this.attr('aria-expanded', 'true');
				$slide.toggleClass("open");
			});
			$(document).on('click',clearMenus);
			function clearMenus(e){
				$(toggle).each(function () {
				  var $this         = $(this)
				  var $parent       = getParent($this)
				  var $slide 		= $this.next('ul').children('.after-slideside');
				  if (!$slide.hasClass('open')) return
				  if (e && e.type == 'click' && /input|textarea/i.test(e.target.tagName) && $.contains($parent[0], e.target)) return
				  if (e.isDefaultPrevented()) return
				  $this.attr('aria-expanded', 'false')
				  $slide.removeClass('open')
				})
			}

.slideside-toggle i.fa-angle-right{
				padding-right:0;
			}
			li.after-slideside{
				position:absolute;
				right:-250px;
				width:250px;
				background-color:ghostwhite;
				transition: all 0.35s linear;
			}
			nav li.open.after-slideside > a{
				padding-left:8px;
				text-align:center;
				border-bottom:1px solid #ececec;
				color:#acacac;
			}
			nav li.open.after-slideside >ul{
				padding-left:0;
			}
			nav li.open.after-slideside >ul>li{
				border-bottom:1px solid #ececec;
			}
			.open.after-slideside{
				right:0;
				transition:all 0.35s linear;
				z-index:1;
			}

<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>

Answer 1

在幻灯片切换点击事件中将课程打开移至.after-slideside和.dropdown

var toggle   = '[data-toggle="slideside"]'
			  var Slideside = function (element) {
				$(element).on('click', this.toggle)
			  }
function getParent($this) {
				var selector = $this.attr('data-target')
				if (!selector) {
				  selector = $this.attr('href')
				  selector = selector && /#[A-Za-z]/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
				}
				var $parent = selector && $(selector)
				return $parent && $parent.length ? $parent : $this.parent()
			}
			$(".slideside-toggle").on('click',function(e){
				e.preventDefault();
				var expand ;
				$this = $(this);
				$parent = getParent($this);
$parent.siblings().find('.after-slideside, .dropdown').removeClass('open');
				$slide = $this.next('ul').children('.after-slideside');
				if($this.attr('aria-expanded') === 'true')
					expand = 'false';	
				else
					expand = 'true';
				
				$this.attr('aria-expanded', 'true');
				$slide.toggleClass("open");
			});
   $(".dropdown").on('click',function(e){
$(this).siblings().find('.after-slideside, .dropdown').removeClass('open');
				
			});
			$(document).on('click',clearMenus);
			function clearMenus(e){
				$(toggle).each(function () {
				  var $this         = $(this)
				  var $parent       = getParent($this)
				  var $slide 		= $this.next('ul').children('.after-slideside');
				  if (!$slide.hasClass('open')) return
				  if (e && e.type == 'click' && /input|textarea/i.test(e.target.tagName) && $.contains($parent[0], e.target)) return
				  if (e.isDefaultPrevented()) return
				  $this.attr('aria-expanded', 'false')
				  $slide.removeClass('open')
				})
			}

.slideside-toggle i.fa-angle-right{
				padding-right:0;
			}
			li.after-slideside{
				position:absolute;
				right:-250px;
				width:250px;
				background-color:ghostwhite;
				transition: all 0.35s linear;
			}
			nav li.open.after-slideside > a{
				padding-left:8px;
				text-align:center;
				border-bottom:1px solid #ececec;
				color:#acacac;
			}
			nav li.open.after-slideside >ul{
				padding-left:0;
			}
			nav li.open.after-slideside >ul>li{
				border-bottom:1px solid #ececec;
			}
			.open.after-slideside{
				right:0;
				transition:all 0.35s linear;
				z-index:1;
			}

<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>