Question

我正在Shopify上开发一个网站，我需要知道如何更改所选菜单项的颜色。当用户单击任何菜单项时，一旦选择了另一个菜单项，颜色将会更改并删除。

我现在尝试使用CSS和JQuery多次解决这个问题，但我做的事似乎没有用。

以下是Shopify中megamenu液体文件的代码。

   <nav class="navbar navbar-inverse" data-spy="affix" data-offset-
      top="197"> 
     <div class="container">

  <div class="mega-menu">

  <!-- Brand and toggle get grouped for better mobile display -->
  <ul class="nav navbar-nav" id="navbar">

    {% assign meagemenu_lists = settings.Megamenu-list %}
    {% for link in linklists[meagemenu_lists].links %}
    {% assign item = link.title | downcase %}

    <li class="level1 dropdown">

      <a class="megamenu_icon{% increment count %} a1" href="{{ link.url }}" 
       title="{{link.title}}">{{ link.title }}</a>
      {% for i in (2..5) %}
      {%capture Megamenu%}megamenu_{{i}}_parent{%endcapture%}
      {% if settings[Megamenu] == item %}

      <div class="sub-menu dropdown-menu">

        <div class="top-sub-menu">

          <div class="item">

            {% if settings.service-megamenu-icon1 != blank %}<p 
            class="image"><i class="{{ settings['service-megamenu-icon1'] 
           }}"></i></p>{% endif %}

            <div class="text">

              <h3>{{ settings['service-megamenu-title1'] }}</h3>
              <p>{{ settings['service-megamenu-subtitle1'] }}</p>

            </div>
          </div>

          <!-- End item -->

          <div class="item">

            {% if settings.service-megamenu-icon2 != blank %}<p 
           class="image"><i class="{{ settings['service-megamenu-icon2'] 
           }}"></i></p>{% endif %}

            <div class="text">
              <h3>{{ settings['service-megamenu-title2'] }}</h3>
              <p>{{ settings['service-megamenu-subtitle2'] }}</p>
            </div>

          </div>
          <!-- End item -->

          <div class="item">

            {% if settings.service-megamenu-icon3 != blank %}<p 
             class="image"><i class="{{ settings['service-megamenu-icon3'] 
             }}"></i></p>{% endif %}

            <div class="text">

              <h3>{{ settings['service-megamenu-title3'] }}</h3>
              <p>{{ settings['service-megamenu-subtitle3'] }}</p>

            </div>
          </div>

          <!-- End item -->

        </div>

        <ul class="menu-level-1">
          {% for j in (1..3) %}
          {% capture mega_title %}megamenu_{{ i }}_column_{{ j }}_title{% 
            endcapture %}
          {% capture mega_col %}megamenu_{{ i }}_column_{{ j }}_menu{% 
          endcapture %}         
          <li class="level2"><h4>{{ settings[mega_title] }}</h4>
            <ul class="menu-level-2">
              {% for link in linklists[settings[mega_col]].links %}
              <li class="level3"><a href="{{ link.url }}" title="{{ 
              link.title }}">{{ link.title }}</a></li>
              {% endfor %}
            </ul>
          </li>
          {% endfor %}
           {% capture _image1 %}megamenu_{{ i }}_image1.jpg{% endcapture %}
           {% capture _image2 %}megamenu_{{ i }}_image2.jpg{% endcapture %}
          <li class="level2">
            <img src="{{ _image1 | asset_url }}" alt="Sub-Menu" />
          </li>

          <li class="level2">
            <img src="{{ _image2 | asset_url }}" alt="Sub-Menu" />
          </li>
        </ul>
        <div class="bottom-sub-menu">
          <p>{{ settings['Megamenu-description'] }}</p>
        </div>
      </div>
      {% endif %}
      {% endfor %}
      <!-- End Dropdow Menu -->
     </li>     
     {% endfor %}
    </ul>
  </div>
   </div>
  </nav>

Answer 1

在HTML菜单中的某处会有一个CSS类，它使用CSS规则为活动项着色。在不同的电子商务主题和平台上，这个类通常是“主动”，“开放”，“导航开放”。可以在页面加载后通过JavaScript添加此类，因此您可能无法在HTML文件中看到它。

我建议使用inspect元素工具查找应用于该项目的规则。

Shopify：如何更改所选菜单项的颜色？

1 个答案: