僅當存在子菜單時才顯示圖標

在我的平板電腦導航中，有一些「加號」圖標用於切換子菜單。我只想在子菜單存在的情況下顯示加號圖標。僅當存在子菜單時才顯示圖標

我已經使用此代碼試了一下：

 if($('.tablet-li-item').find('.tablet-sub-menu').length !== 0) { 
     $(this).children('.open-btn').css('display', 'block'); 
    }

HTML：

<ul class="tablet-nav"> 
     {% for menuItem in menu.menuStructure %} 
      <li class="tablet-li-item"> 
       {{ render(controller("ez_content:viewLocation", {"locationId": menuItem.location.id, "viewType": "menu"})) }} 
       <i class="fa fa-caret-down open-btn" aria-hidden="true"></i> 
       <div class="arrow"></div> 
       {% if menuItem.submenu|length > 0 %} 
        <ul class="tablet-sub-menu" hidden> 
         <div class="inner-tablet-sub-menu"> 
         {% for submenu in menuItem.submenu %} 
          <li class="tablet-sub-li-item"> 
           {{ render(controller("ez_content:viewLocation", {"locationId": submenu.location.id, "viewType": "menu"})) }} 
          </li> 
         {% endfor %} 
         </div> 
        </ul> 
       {% endif %} 
      </li> 
     {% endfor %} 
    </ul>

如果我將鼠標懸停/單擊對象本解決方案僅適用，不幸的是這個解決方案是不正確的在這種情況下，，因爲它是一個平板電腦菜單。

也許有人可以幫我解決這個問題。

編輯：

現在我知道了，我嘗試過用jQuery函數has()和addClass()

$('.tablet-li-item').has('ul').children('.open-btn').addClass('active');

，而不是addClass()，show()也將是一個可能的解決方案。

來源

2017-10-19 Valcone

什麼是$（本）的範圍。我們需要更多的代碼來幫助你。請粘貼您的HTML設置。 –

我添加了html – Valcone

謝謝。但是編輯中仍然沒有$（this）的範圍。您的if語句不會將jQuery放在範圍內，這指向任何內容。 –

我的猜測是你的錯在$(this)範圍之內。

你可以試試這個：

$(document).ready(function(){ 
    $('.tablet-li-item').each(function(){ 
     if($(this).find('.tablet-sub-menu').length > 0){ 
      $(this).children('.open-btn').css('visibility', 'visible'); 
     } 
    }); 
});

來源

2017-10-19 07:36:27

感謝您的回答，不幸的是按鈕不顯示，我真的不知道爲什麼^^ – Valcone

你檢查了元素，看看是否有任何CSS阻止他們顯示？ –

是的，我有，'open-btn'的默認值是'visibility：hidden'，這應該被jquery函數覆蓋，但它不會 – Valcone

僅當存在子菜單時才顯示圖標

回答

相關問題