Question

我想用锚创建一个下拉菜单。下拉菜单和锚点位于同一HTML页面上。

我是有关Javascript的初学者，我尝试过此代码，但是找不到执行点击的方法。

谢谢您的帮助。

function selection () {
  var choicemenu = document.getElementById('choicemenu');
  choicemenu.addEventListner('click',selection);
  choicemenu.onclick = ;
}

<select id=choicemenu>
  <option selected>Choose</option> 
  <option href="#c1"><a>Category 1</a></option> 
  <option href="#c2"><a>Category 2</a></option>
</select> 

<p>
  <div id="c1">Category 1</div> 
  <div id="c2">Category 2</div> 
</p>

Answer 1

您在寻找这个吗？如果我误会了，请原谅

function selection () {
var choicemenu = document.getElementById("choicemenu");
var option=choicemenu.options[choicemenu.selectedIndex];
//if you want to do something onclick or you can skip the below line
option.onclick=test;
//click the anchor
option.click();
}

function test(){
alert("do what you want to do here");
}

<select id=choicemenu onchange="selection()";>

<option selected>Choose</option> 
<option><a href="#c1">Category 1</a></option> 
<option><a href="#c2">Category 2</a></option>

</select> 

<p>
<div id="c1">Category 1</div> 
<div id="c2">Category 2</div> 
</p>

Answer 2

Idk（如果您为此设置了选择），但您确实应该使用下拉菜单。您在选择时会遇到问题，尤其是默认值没有任何价值。我也不相信href属性是选项标签的有效属性。在p标签内也有一个div，它是无效的html。话虽如此，您可以使用scrollintoview实现此目的。现在已经很好地支持此功能。您可以在https://caniuse.com/#feat=scrollintoview上查看支持表格。并在此处https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView上滚动阅读。如果您不希望平滑的滚动行为，则完全没有理由使用javascript，您可以使用本机href锚点并以这种方式捕捉到各个部分。但这是带有下拉列表的示例：

const scrollTriggers = document.querySelectorAll('#choicemenu a');
scrollTriggers.forEach(scrollTrigger => {
  scrollTrigger.addEventListener('click', function(e){
    e.preventDefault();
    const hash = this.hash;
    const scrollTarget = document.querySelector(hash);
    scrollTarget.scrollIntoView({behavior: "smooth"});
  })
})

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown .dropdown-toggle{
  padding:5px;
  border:1px solid #000;
  display:inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
  max-height:100px;
  overflow:auto;
}

.dropdown-content a{
  display:block;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* heights just for demo purposes */
#c1,#c2,#c3,#c4,#c5,#c6,#c7,#c8 {
  height:500px;
}

<div class="dropdown">
  <span class="dropdown-toggle">Choose One &#9660;</span>
  <div id="choicemenu" class="dropdown-content">
    <a href="#c1">Category1</a>
    <a href="#c2">Category2</a>
    <a href="#c3">Category3</a>
    <a href="#c4">Category4</a>
    <a href="#c5">Category5</a>
    <a href="#c6">Category6</a>
    <a href="#c7">Category7</a>
    <a href="#c8">Category8</a>
  </div>
</div>


<div id="c1">Category 1</div> 
<div id="c2">Category 2</div>
<div id="c3">Category 3</div> 
<div id="c4">Category 4</div>
<div id="c5">Category 5</div> 
<div id="c6">Category 6</div>
<div id="c7">Category 7</div> 
<div id="c8">Category 8</div>

或者您可以使用如下所示的jquery：

$('#choicemenu a').click(function(e){
  e.preventDefault();
  const hash = this.hash;
  $('html, body').animate({
    scrollTop: $(hash).offset().top
  }, 500);
});

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown .dropdown-toggle{
  padding:5px;
  border:1px solid #000;
  display:inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
  max-height: 100px;
  overflow:auto;
}

.dropdown-content a{
  display:block;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* heights just for demo purposes */
#c1,#c2,#c3,#c4,#c5,#c6,#c7,#c8 {
  height:500px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<div class="dropdown">
  <span class="dropdown-toggle">Choose One &#9660;</span>
  <div id="choicemenu" class="dropdown-content">
    <a href="#c1">Category1</a>
    <a href="#c2">Category2</a>
    <a href="#c3">Category3</a>
    <a href="#c4">Category4</a>
    <a href="#c5">Category5</a>
    <a href="#c6">Category6</a>
    <a href="#c7">Category7</a>
    <a href="#c8">Category8</a>
  </div>
</div>


<div id="c1">Category 1</div> 
<div id="c2">Category 2</div>
<div id="c3">Category 3</div> 
<div id="c4">Category 4</div>
<div id="c5">Category 5</div> 
<div id="c6">Category 6</div>
<div id="c7">Category 7</div> 
<div id="c8">Category 8</div>

如何创建带有锚点的下拉菜单？

2 个答案: