[jQuery] 특정 텍스트 포함된 요소 찾기

닫혀있는 gnb형식의 홈페이지에서 서브페이지 진입 시 해당하는 gnb만 열어두기

 

HTML

<nav class="gnb-wrap">
    <ul id="gnb">
        <li>
            <a href="#n">About</a>
            <ul>
                <li class="<?php echo isset($on1)?$on1:""?>"><a href="greeting.php">Greeting</a></li>
                <li class="<?php echo isset($on2)?$on2:""?>"><a href="president.php">President</a></li>
                <li class="<?php echo isset($on3)?$on3:""?>"><a href="history.php">History</a></li>
                <li class="<?php echo isset($on4)?$on4:""?>"><a href="committee.php">Committee</a></li>
            </ul>
        </li>
        <li>
            <a href="#n">Congress and Meeting</a>
            <ul>
                <li class="<?php echo isset($on1)?$on1:""?>"><a href="conference_list.php">Recent</a></li>
                <li class="<?php echo isset($on2)?$on2:""?>"><a href="calendar_list.php">Past</a></li>
                <li class="<?php echo isset($on3)?$on3:""?>"><a href="awards.php">Schedule</a></li>
            </ul>
        </li>
   	</ul>
</nav>

 

CSS

.gnb-wrap{overflow-y: auto;width: 100%;height: calc(100% - 44px);}
#gnb{width: 100%;margin-top: 25px;}
#gnb > li{position: relative;width: 100%;}
#gnb > li > a{display: block;padding: 20px 40px;font-size: 18px;color: #fff;font-weight: 300;}
#gnb > li > ul{display: none;width: 100%;padding: 15px 0;background-color: #0d3860;}
#gnb > li > ul.active{display: block;}
#gnb > li > ul > li{-webkit-transition: 0.2s background-color;transition: 0.2s background-color;}
#gnb > li > ul > li > a{display: block;padding: 12px 40px;font-size: 16px;color: #fff;-webkit-transition: 0.3s;transition: 0.3s;}
#gnb > li > ul > li > a i{margin-top: -3px;vertical-align: middle;}
#gnb > li > ul > li:hover > a, #gnb > li > ul > li.on > a{color: #00ffff;}

 

jQuery

var leftTitle = $('.sub-visual-text > p').text();
var subTitle = $('.sub-visual-text > h2').text();

console.log(leftTitle);
console.log(subTitle);

$('#gnb > li > a:contains(' + leftTitle + ')').next('ul').addClass('active');
if(leftTitle == ''){
    $('#gnb > li > ul').removeClass('active');
}

$('#gnb > li > ul > li').each(function(e){
    if(!$(this).parent('ul').hasClass('active')){
        $(this).removeClass('on');
    }
});