Question

我正在用JS侧导航栏编写一个简单的网站。当我调整窗口大小以使用不同的宽度进行开发时，我注意到页面会跳到顶部。然后，我注意到当我单击汉堡包图标时，页面也会跳到顶部。

我已经调查过了，这似乎是 onClick 的问题所在。我尝试使用 return false ，但问题仍然相同。

我使用了w3 schools上提供的代码/教程。感谢您的帮助

这是我的代码

HTML：

yield

CSS

import scrapy

class HackerItem(scrapy.Item): #declaring the item
    hackertitle = scrapy.Field()


class HackerSpider(scrapy.Spider):
    name = 'hackernewscrawler'
    allowed_domains = ['news.ycombinator.com'] # website we chose
    start_urls = ['http://news.ycombinator.com/']

    def parse(self,response):
        sel = scrapy.Selector(response) #selector to help us extract the titles
        item=HackerItem() #the item declared up

# xpath of the titles
        item['hackertitle'] = sel.xpath("//tr[@class='athing']/td[3]/a[@href]/text()").extract()


# return items
        yield item

JS

scrapy crawl hackernewscrawler -o hntitles.json -t json

Answer 1

您怀疑，这是由href=标记中的a引起的。默认情况下，标签会在页面的某个位置导航，因此，href=#或您撰写的内容都只会导航到页面顶部。

return false应该可以解决问题，但可能位置不正确。尝试将其放入closeNav函数中，作为最终声明。否则，您可能需要为标签创建事件侦听器，并仅使用return false进行响应。您也可以尝试使用event.preventDefault()而不是return false（但返回false应该有用-它比preventDefault更有效。

更新：

有用的一件事是避免使用内联javascript（即js在标签本身上的位置：onclick="closeNav();return false;"）。相反，创建一个事件侦听器，然后在其中执行您的js。 Here is a technical discussion关于内联JavaScript和事件侦听器（普遍的观点是内联JavaScript更加令人烦恼且不太理想，尤其是在事件冒泡方面，这是您要在此处处理的问题。）Here is a more simple文章。

因此，切换到事件监听器结构，如下所示（未测试）：

var cbel = document.getElementsByClassname("closebtn");
cbel.addEventListener("click", closeNav, false);

var opel = document.getElementsByClassname("hamburger");
opel.addEventListener("click", openNav, false);



/* Set the width of the side navigation to 250px and the left margin of the page content to 250px */
function openNav() {
    document.getElementById("mySidenav").style.width = "300px";
    document.getElementById("main").style.marginLeft = "300px";
    return false;
}

/* Set the width of the side navigation to 0 and the left margin of the page content to 0 */
function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft = "0";
    return false;
}

最后一点：我还建议您使用jQuery，因为：

1）您正在使用bootstrap，它使用jQuery本身，因此已经加载

2）打字要少得多

3）大多数人（包括我自己）发现它要简单得多。例如，上面的jQuery代码如下所示：

$(function(){

    $('.closebtn').click(function(){
        $("#mySidenav").css('width', '300px');
        $("#main").css('margin-left', '300px');
    });

});//END document.ready

onClick跳到页面顶部

HTML：

CSS

JS

1 个答案:

更新：