下拉导航没有出现在一个页面上，jQuery工作正常

时间：2017-11-16 02:55:58

标签： jquery drop-down-menu navigation

我有一个由主页，pageA和pageB组成的三页网站。我在所有页面上都有相同的导航。在主页和pageA，但下拉导航工作完美找到。在pageB上，当我将鼠标悬停在导航栏上时，它不会显示。看起来jQuery正在运行，因为当我将鼠标悬停在导航栏上时，我可以在控制台中看到显示：none更改为display：block，就像jQuery指示的那样。因此看起来导航就在那里，我无法看到它。有谁知道导致这个问题的原因是什么？

这是我的下拉导航代码：

var windowWidth = $(window).width();
if (windowWidth > 800) {
    $('.main-links').mouseenter(function (e) {
    $(".nav-dropdown").hide();
    $(this).next('.nav-dropdown').show();
    });

    $('.nav-dropdown').mouseleave(function (e) {
    $('.nav-dropdown').hide();
    e.stopPropagation();
    });

    $('nav').mouseleave(function (e) {
    $('.nav-dropdown').hide();
    })
}

if (windowWidth < 800) {
    $('.main-links').click(function (e) {
    $(this).next('.nav-dropdown').slideToggle();
    e.stopPropagation();
    })
}

$('.nav-dropdown').click(function (e) {
    $('.nav-dropdown').hide();
    e.stopPropagation();
});
$('html:not(.nav-dropdown)').click(function () {
    $('.nav-dropdown').hide();
});
$('#nav-toggle').click(function () {
    $('nav ul').slideToggle();
});
$('#nav-toggle').on('click', function () {
    this.classList.toggle('active');
});
$('.nav-dropdown').click(function (e) {
    $('#nav-toggle').removeClass('active');
    $('.nav-list').hide();
    e.stopPropagation();
})
$('nav > ul > li > a:only-child').click(function (e) {
    $('#nav-toggle').removeClass('active');
    $('.nav-list').hide();
    e.stopPropagation();
});

我不确定是否有这个问题，但这是我在网页A上的html（下拉列表的工作原理，以及主页：

<section class="sub-nav">
  <div class="solutions-nav solutions-secondary-wrapper">
    <ul class="solutions-links">
      <li><a onClick="scrollToElement(click)">NAVIGATION_CLICK_COLLECT</a></li>
      <li><a onClick="scrollToElement(returns)">NAVIGATION_STORE_RETURNS</a></li>
      <li><a onClick="scrollToElement(aisle)">NAVIGATION_ENDLESS_AISLE</a></li>
      <li><a onClick="scrollToElement(store)">NAVIGATION_STORE_FULFILMENT</a></li>
      <li><a onClick="scrollToElement(customer)">NAVIGATION_CUSTOMER_CARE</a></li>
      <li><a onClick="scrollToElement(partner)">NAVIGATION_PARTNER_FULFILMENT</a>
      </li>
    </ul>
  </div>  
</section> 
<div class="solutions-header" > <h1>SOLUTIONS_HEADER_1<span>SOLUTIONS_HEADER_2</span></h1></div>

<div class="placeholder" id="click"></div>
<section class="click-and-collect solutions-secondary-wrapper">
  <h2><span></span>SOLUTIONS_CLICK_COLLECT_1H</h2>
  <div class="click-collect-container">
    <div class="img-container">
      <img src="assets/click-and-collect.jpg" alt="">
    </div>
    <div class="info-container">
      <p>SOLUTIONS_CLICK_COLLECT_1P</p>
      <p>SOLUTIONS_CLICK_COLLECT_2P</p>
    </div>
  </div>
</section> 

<div class="placeholder" id="returns>"></div>
<section class="store-returns">
  <div class="solutions-secondary-wrapper">
  <h2><span></span>SOLUTIONS_STORE_RETURNS_1H</h2>
    <div class="store-returns-container">
      <div class="img-container">
        <img src="assets/store-returns.jpg" alt="">
      </div> 
      <div class="info-container">
        <p>SOLUTIONS_STORE_RETURNS_1P</p>
        <p>SOLUTIONS_STORE_RETURNS_2P</p>
      </div>
    </div>
  </div>
</section>

<div class="placeholder" id="aisle"></div>
<section class="endless-aisle solutions-secondary-wrapper">
  <h2><span></span>SOLUTIONS_ENDLESS_AISLE_1H</h2>
  <div class="endless-aisle-container">
    <div class="img-container">
      <img src="assets/endless-aisle.jpg" alt="">
    </div>
    <div class="info-container">
      <p>SOLUTIONS_ENDLES_AISLE_1P</p>
      <p>SOLUTIONS_ENDLESS_AISLE_2P</p>
    </div>
  </div>
</section>

<div class="placeholder" id="store"></div>
<section class="store-fulfilment">
<div class="solutions-wrapper">
  <h2><span></span>SOLUTIONS_STORE_FULFILMENT_1H</h2>
  <div class="store-fulfilment-container">
    <div class="store">
      <img src="assets/small-store.png" alt="">
      <p>SOLUTIONS_STORE_FULFILMENT_1P</p>
      <p>SOLUTIONS_STORE_FULFILMENT_2P</p>
    </div>
    <div class="store">
      <img src="assets/medium-store.png" alt="">
      <p>SOLUTIONS_STORE_FULFILMENT_3P</p>
      <p>SOLUTIONS_STORE_FULFILMENT_4P</p>
    </div>
    <div class="store">
      <img src="assets/big-store.png" alt="">
      <p>SOLUTIONS_STORE_FULFILMENT_5P</p>
      <p>SOLUTIONS_STORE_FULFILMENT_6P</p>
    </div>
  </div>
</div>
</section>

<div class="placeholder" id="customer"></div>
<div class="solutions-secondary-wrapper customer-care">
  <h2><span></span>SOLUTIONS_CUSTOMER_CARE_1H</h2>
  <div class="customer-care-container">
    <div class="customer-care-cell">
      <h3>SOLUTIONS_CUSTOMER_CARE_SUBH1</h3>
      <div class="customer-img">
        <img src="assets/adjustments.png" alt="">
      </div>
      <p>SOLUTIONS_CUSTOMER_CARE_SUBP1</p>
    </div>
    <div class="customer-care-cell">
      <h3>SOLUTIONS_CUSTOMER_CARE_SUBH2</h3>
      <div class="customer-img">
        <img src="assets/discounts.png" alt="">
      </div>
      <p>SOLUTIONS_CUSTOMER_CARE_SUBP2</p>
        </div>
    </div>
    <div class="customer-care-container">
    <div class="customer-care-cell">
      <h3>SOLUTIONS_CUSTOMER_CARE_SUBH3</h3>
      <div class="customer-img">
        <img src="assets/fraud.png" alt="">
      </div>
      <p>SOLUTIONS_CUSTOMER_CARE_SUBP3</p>
    </div>
    <div class="customer-care-cell">
      <h3>SOLUTIONS_CUSTOMER_CARE_SUBH4</h3>
      <div class="customer-img">
        <img src="assets/customer-service.png" alt="">
      </div>
      <p>SOLUTIONS_CUSTOMER_CARE_SUBP4</p>
    </div>
  </div>
</div>

<div class="placeholder" id="partner"></div>
<section class="partner-dropship">
  <div class="solutions-wrapper">
    <h2><span></span>SOLUTIONS_PARTNER_DROPSHIP_1H</h2>
    <div class="partner-container">
      <div class="partner-cell">
        <h3>SOLUTIONS_PARTNER_DROPSHIP_SUBH1</h3>
        <img src="assets/regional-consolidation.png" alt="">
        <p>SOLUTIONS_PARTNER_DROPSHIP_SUBP1</p>
      </div>
      <div class="partner-cell">
        <h3>SOLUTIONS_PARTNER_DROPSHIP_SUBH2</h3>
        <img src="assets/vendor-dropship.png" alt="">
        <p>SOLUTIONS_PARTNER_DROPSHIP_SUBP2</p>
      </div>
      <div class="partner-cell">
        <h3>SOLUTIONS_PARTNER_DROPSHIP_SUBH3</h3>
        <img src="assets/franchise-collab.png" alt="">
        <p>SOLUTIONS_PARTNER_DROPSHIP_SUBP2</p>
      </div>
    </div>
  </div>
</section>

这是我在网页B上的html，它不起作用：

<section class="sub-nav">
    <div class="work-nav work-wrapper">
        <ul class="work-links">
            <li><a onClick="scrollToElement(service)">NAVIGATION_SOFTWARE_SERVICE</a></li>
            <li><a onClick="scrollToElement(practice)">NAVIGATION_BEST_PRACTICE</a></li>
            <li><a onClick="scrollToElement(integrations)">NAVIGATION_REUSABLE_INTEGRATIONS</a></li>
            <li><a onClick="scrollToElement(collaboration)">NAVIGATION_PARTNER_COLLABORATION</a> </li>
            <li><a onClick="scrollToElement(success)">NAVIGATION_SHARING_SUCCESS</a></li>
            <li><a onClick="scrollToElement(values)">NAVIGATION_VALUES</a>
            </li>
        </ul>
    </div>
</section>
<div class="work-header" ><h1>WORK_HEADER_1</h1></div>

<div id="service" class="placeholder"></div>
<section class="software-service work-wrapper">
    <h2><span></span>WORK_SOFTWARE_SERVICE_1H</h2>
    <div class="software-container">

        <div class="software-cell">
            <div class="title">
                <h3>WORK_SERVICE_1H</h3> 
            </div>

            <div class="price-container">
                <p>WORK_SERVICE_1P</p>
                <div class="price">
                    <h3>$19</h3>
                    <p class="price-bold">WORK_SERVICE_PRICE_1P<br>WORK_SERVICE_PRICE_2P</p>
                </div>
            </div>

            <div class="price-options">
                <ul>WORK_TEAM_INCLUDES
                    <div class="bonus">
                        <li>WORK_TEAM_INCLUDES_L1</li>
                        <li>WORK_TEAM_INCLUDES_L2</li>
                        <li>WORK_TEAM_INCLUDES_L3</li>
                    </div>
                </ul>
                <div class="promotion-links">
                    <a class="free-trial" href="#">WORK_FREE_TRIAL</a>
                    <a class="buy-now" href="#">WORK_BUY_NOW</a>
                </div>
            </div>  
        </div>

        <div class="software-cell middle">
            <div class="title">
                <h3>WORK_SERVICE_2H</h3>
            </div>

            <div class="price-container">
                <p>WORK_SERVICE_1P</p>
                <div class="price">
                    <h3>$49</h3>
                    <p class="price-bold">WORK_SERVICE_PRICE_1P<br>WORK_SERVICE_PRICE_2P</p>
                </div>
            </div>

            <div class="price-options">
                <ul>WORK_PROFESSIONAL_INCLUDES
                    <div class="bonus">
                        <li>WORK_PROFESSIONAL_INCLUDES_L1</li>
                        <li>WORK_PROFESSIONAL_INCLUDES_L2</li>
                        <li>WORK_PROFESSIONAL_INCLUDES_L3</li>
                    </div>
                </ul>
                <div class="promotion-links">
                        <a class="free-trial" href="#">WORK_FREE_TRIAL</a>
                        <a class="buy-now" href="#">WORK_BUY_NOW</a>
                    </div>
            </div>  
        </div>

        <div class="software-cell">
            <div class="title">
                <h3>WORK_SERVICE_3H</h3>
            </div>

            <div class="price-container">
                <p>WORK_SERVICE_1P</p>
                <div class="price">
                    <h3>$99</h3>
                    <p class="price-bold">WORK_SERVICE_PRICE_1P<br>WORK_SERVICE_PRICE_2P</p>
                </div>
            </div>

            <div class="price-options">
                <ul>WORK_ENTERPRISE_INCLUDES
                    <div class="bonus">
                        <li>WORK_ENTERPRISE_INCLUDES_L1</li>
                        <li>WORK_ENTERPRISE_INCLUDES_L2</li>
                        <li>MWORK_ENTERPRISE_INCLUDES_L3</li>
                        <li>WORK_ENTERPRISE_INCLUDES_L4</li>
                        <li>WORK_ENTERPRISE_INCLUDES_L5</li>
                    </div>
                </ul>
                <div class="promotion-links">
                        <a class="free-trial" href="#">WORK_FREE_TRIAL</a>
                        <a class="buy-now" href="#">>WORK_BUY_NOW</a>
                    </div>
            </div>  
        </div>
    </div>
</section>

    <!-- BEST PRACTICE SECTION -->

<div id="practice" class="placeholder"></div>
<section class="best-practice">
    <div class="work-wrapper">
        <div class="best-practice-container">
            <h2><span></span>WORK_BEST_PRACTICE_1H</h2>
            <p>WORK_BEST_PRACTICE_1P</p>
            <p>WORK_BEST_PRACTICE_2P</p>
        </div>
    </div>
</section>

<!-- REUSABLE INTEGRATIONS SECTION  -->

<div id="integrations" class="placeholder"></div>
<section class="reusable-integrations">
    <div class="work-wrapper">
        <div class="integrations-container">
            <h2><span></span>Reusable Integrations</h2>
            <div class="integrations-diagram">
                <img src="assets/placeholder.png" alt="">
            </div>
            <p>An Order Management sits at the heart of enterprise architecture, and full integration can be a big job. We've already integrated with many different systems, and whilst no two enterprise architectures are the same, we can save you a lot of time and effort by reusing the integrations we've already built.</p>
        </div>
    </div>
</section>

<!-- PARTNER COLLABORATION SECTION  -->

<div id="collaboration" class="placeholder"></div>
<section class="partner-collaboration">
    <div class="work-wrapper">
        <div class="partner-container">
            <h2><span></span>Partner Collaboration</h2>
                <div class="partner-logo">
                    <img src="assets/handshake.png" alt="">
                </div>
            <p>Purecomm works closely with leading System Integration Partners across Asia Pacific, to provide on-the-ground support in each market, from people who are already familiar with your systems.</p>
        </div>
    </div>
</section>

<!-- SHARING SUCCESS SECTION -->

<div id="success" class="placeholder"></div>
<section class="sharing-success">
    <div class="work-wrapper">
        <div class="success-container">
            <h2><span></span>Sharing Success</h2>
            <p>Join our client community, and gain insights from some of the most successful retail brands in the world.</p>
            <p>Your success is our success, and our specialist omnichannel consultants will be with you every step of the way.</p>
        </div>
    </div>
</section>

<!-- VALUES SECTION -->

<div id="values" class="placeholder"></div>
<section class="our-values">
    <div class="work-wrapper">
        <div class="values-container">
            <h2><span></span>Living Our Values</h2>
            <p>The way we do work is simple, reliable and collaborative, and we apply these values to everything we do.</p>
            <p>We build simple solutions that are fast and easy to use. When we make a promise, we keep it. When we make a mistake, we learn from it.</p>
            <p>We're always lookinh for confident professionals who share our values. If you're looking for a new challenge, <span>join us!</span></p>
        </div>
    </div>
</section>

这是我最初的猜测，它可能与页面上的html有关，但我不确定。

0 个答案:

没有答案
相关问题
最新问题