禁用空父

Question

我有5个列表项目，其中包含类别文章，博客，手册，网络研讨会，白皮书的标签，并将其子项内容放在“view-content”div.on加载它显示博客并隐藏另一个孩子。当我小鸡'白皮书'儿童白皮书显示和其他孩子将隐藏（工作正常）。

我想将列表项中的'禁用'作为<li class="disable"><a></a></li>添加到没有子项的列表中。在我的示例中，'小册子'和'网络研讨会'没有孩子所以需要添加相应列表的“禁用”类。

(function($) {
  function perspective_type() {
    $(".perspective-list a").click(function(e) {
      e.preventDefault();
      $(".perspective-list a").parent().removeClass('active');
      $('.wrapper .page-perspective').show();
      var href = $(this).attr('href');
      $('.wrapper > :not(.' + href + ')').hide();
      $('.wrapper > .' + href + '').show();
      $(this).parent().addClass('active');
    });
    $(".perspective-list a").mouseover(
      function() {
        $(".perspective-list a").removeClass('hover');
        $(this).parent().addClass('hover');
      });
    $(".perspective-list a").mouseout(
      function() {
        $(".perspective-list a").each(function() {
          $(this).parent().removeClass('hover');
        });
      });
    $('#perspectives .perspectiveReadurl', '#page_perspectives .perspectiveReadurl').find('a').attr('target', '_blank');
  }
  jQuery(document).ready(function($) {
    var href = 'Blogs';
    jQuery('.perspective-list a.' + href + '').parent().addClass('active');
    jQuery('.wrapper > :not(.' + href + ')').hide();
    perspective_type();
  });

})(jQuery)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="perspective-list">
  <ul class="nav nav-justified">
    <li class=""><a href="Articles" class="Articles">Articles</a></li>
    <li class=""><a href="Blogs" class="Blogs">Blogs</a></li>
    <li class=""><a href="Brochures" class="Brochures">Brochures</a></li>
    <li class=""><a href="Webinars" class="Webinars">Webinars</a></li>
    <li class="active"><a href="Whitepapers" class="Whitepapers">Whitepapers</a></li>
  </ul>
</div>
<div class="view-content">
  <div class="wrapper">
    <div class=" Articles">
      article
    </div>
  </div>
  <div class="wrapper">
    <div class="Blogs">
      Blogs
    </div>
  </div>
  <div class="wrapper">
    <div class="Whitepapers">
      Whitepapers
    </div>
  </div>
</div>

Answer 1

我想这个jsfiddle会帮助你https://jsfiddle.net/h3ttxk8r/

jQuery(document).ready(function($) {
    var href = 'Blogs';
    jQuery('.perspective-list a.' + href + '').parent().addClass('active');
    jQuery('.wrapper > :not(.' + href + ')').hide();
    perspective_type();

    $('ul > li > a').each(function(){
        if(!$('div').hasClass($(this).attr('href'))){
            $(this).parent().addClass('disabled');
        }
   });

}）;

<强> CSS

.disabled {
    cursor: none;
    opacity: 0.5;
    pointer-events: none;
}

Answer 2

您可以.each通过列表项，检查多个元素是否共享同一个类。如果没有任何其他元素，则添加一类禁用。

(function($) {
  function perspective_type() {
    $(".perspective-list a").click(function(e) {
      e.preventDefault();
      $(".perspective-list a").parent().removeClass('active');
      $('.wrapper .page-perspective').show();
      var href = $(this).attr('href');
      $('.wrapper > :not(.' + href + ')').hide();
      $('.wrapper > .' + href + '').show();
      $(this).parent().addClass('active');
    });
    $(".perspective-list a").mouseover(
      function() {
        $(".perspective-list a").removeClass('hover');
        $(this).parent().addClass('hover');
      });
    $(".perspective-list a").mouseout(
      function() {
        $(".perspective-list a").each(function() {
          $(this).parent().removeClass('hover');
        });
      });
    $('#perspectives .perspectiveReadurl', '#page_perspectives .perspectiveReadurl').find('a').attr('target', '_blank');
  }
  var href = 'Blogs';
  jQuery('.perspective-list a.' + href + '').parent().addClass('active');
  jQuery('.wrapper > :not(.' + href + ')').hide();
  perspective_type();
  
  jQuery(".nav-justified a").each(function() {
    var className = jQuery(this).attr("class");
    var elemCount = jQuery("." + className).length;
    if(elemCount == 1) {
     jQuery(this).parent().addClass("disable");
    }
  });

})(jQuery)

.disable {
 display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="perspective-list">
  <ul class="nav nav-justified">
    <li class=""><a href="Articles" class="Articles">Articles</a></li>
    <li class=""><a href="Blogs" class="Blogs">Blogs</a></li>
    <li class=""><a href="Brochures" class="Brochures">Brochures</a></li>
    <li class=""><a href="Webinars" class="Webinars">Webinars</a></li>
    <li class="active"><a href="Whitepapers" class="Whitepapers">Whitepapers</a></li>
  </ul>
</div>
<div class="view-content">
  <div class="wrapper">
    <div class=" Articles">
      article
    </div>
  </div>
  <div class="wrapper">
    <div class="Blogs">
      Blogs
    </div>
  </div>
  <div class="wrapper">
    <div class="Whitepapers">
      Whitepapers
    </div>
  </div>
</div>

Answer 3

我假设你只想在第一次加载时运行它，而不是每次鼠标驱动器或点击发生时运行它。

你也可能想要停止你的鼠标悬停并点击li中有disable类的功能，但我会留给你：）

＆＃13;

＆＃13;

(function($) {
  function perspective_type() {
    $(".perspective-list a").each(function(e){
      var target = $(this).attr('href');
      if($('div.'+target).text() == ''){
        $(this).parent().addClass('disable')
      }
    });
    $(".perspective-list a").click(function(e) {
      e.preventDefault();
      $(".perspective-list a").parent().removeClass('active');
      $('.wrapper .page-perspective').show();
      var href = $(this).attr('href');
      $('.wrapper > :not(.' + href + ')').hide();
      $('.wrapper > .' + href + '').show();
      $(this).parent().addClass('active');
    });
    $(".perspective-list a").mouseover(
      function() {
        $(".perspective-list a").removeClass('hover');
        $(this).parent().addClass('hover');
      });
    $(".perspective-list a").mouseout(
      function() {
        $(".perspective-list a").each(function() {
          $(this).parent().removeClass('hover');
        });
      });
    $('#perspectives .perspectiveReadurl', '#page_perspectives .perspectiveReadurl').find('a').attr('target', '_blank');
  }
  jQuery(document).ready(function($) {
    var href = 'Blogs';
    jQuery('.perspective-list a.' + href + '').parent().addClass('active');
    jQuery('.wrapper > :not(.' + href + ')').hide();
    perspective_type();
  });

})(jQuery)

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="perspective-list">
  <ul class="nav nav-justified">
    <li class=""><a href="Articles" class="Articles">Articles</a></li>
    <li class=""><a href="Blogs" class="Blogs">Blogs</a></li>
    <li class=""><a href="Brochures" class="Brochures">Brochures</a></li>
    <li class=""><a href="Webinars" class="Webinars">Webinars</a></li>
    <li class="active"><a href="Whitepapers" class="Whitepapers">Whitepapers</a></li>
  </ul>
</div>
<div class="view-content">
  <div class="wrapper">
    <div class=" Articles">
      article
    </div>
  </div>
  <div class="wrapper">
    <div class="Blogs">
      Blogs
    </div>
  </div>
  <div class="wrapper">
    <div class="Whitepapers">
      Whitepapers
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;