空の親のリストアイテムを無効にする

Question

記事、ブログ、パンフレット、ウェビナー、ホワイトペーパーのクラスを持つタグを持つ5つのリストアイテムがあり、 'view-content' div.onに子コンテンツを持ち、ブログを表示して非表示にします私は白紙の子供の白書をひそめ、他の子供は隠す（うまく働く）。

私は、リストの項目に<li class="disable"><a></a></li>という子を持たないリストを追加したいと思っています。私の例では、「パンフレット」と「Webinars」に子がなく、クラス '無効にしてください。

(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

をリスト項目を介して、複数の要素が同じクラスを共有しているかどうかを確認します。他の要素がない場合は、無効なクラスを追加します。

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

私はこの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 3

私はあなただけ最初のロードではなく、mouseroverやクリックが起こるたびにこれを実行したいと仮定します。

あなたはまた、おそらくあなたのマウスオーバーを止めるとLiの関数をクリックしたいと思うでしょうが、クラスdisableを持っていますが、私はあなたのためにそれを残しておきます:)あなたは.eachをすることができます

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

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