Javascript 下拉框中的问题(HTML)

Javascript 下拉框中的问题(HTML),javascript,jquery,html,css,drop-down-menu,Javascript,Jquery,Html,Css,Drop Down Menu,我有5个图像用于刷卡,需要为html中的所有5个图像页面添加下拉框,因为第一个图像幻灯片下拉框的大小是固定的,可以单击,但对于剩余的4个图像页面,下拉框很小,也不能单击,这似乎是一个奇怪的问题,谷歌搜索了很多,但无法找到与我的问题相关的解决方案 css html { height: 100%; } body { margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.5; p

我有5个图像用于刷卡,需要为html中的所有5个图像页面添加下拉框,因为第一个图像幻灯片下拉框的大小是固定的,可以单击,但对于剩余的4个图像页面,下拉框很小,也不能单击,这似乎是一个奇怪的问题,谷歌搜索了很多,但无法找到与我的问题相关的解决方案

css

html {
height: 100%;
}
 body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
 line-height: 1.5;
 position: relative;
 height: 100%;
}
.swiper-container {
width: 90%;
height: 100%;
color: #fff;
text-align: center;
}

.red-slide {
 background: "file:///android_res/drawable/r9.jpg";

 }
.blue-slide {
 background: "file:///android_res/drawable/br.jpeg";
 }
 .orange-slide {
 background: "file:///android_res/drawable/br.jpeg";
 }
.green-slide {
 background: "bb1.jpg";
 }
.pink-slide {
 background: "bb1.jpg";
 }
 .swiper-slide .title {
 font-style: italic;
 font-size: 42px;
 margin-top: 80px;
 margin-bottom: 0;
 line-height: 45px;
 }
.pagination {
 position: absolute;
 z-index: 20;
 left: 10px;
 bottom: 10px;
  }
 .swiper-pagination-switch {
 display: inline-block;
 width: 8px;
 height: 8px;
 border-radius: 8px;
 background: #222;
 margin-right: 5px;
 opacity: 0.8;
 border: 1px solid #fff;
 cursor: pointer;
}
.swiper-visible-switch {
 background: #aaa;
  }
 .swiper-active-switch {
 background: #fff;
 }

   .wrapper {
    text-align: center;
    }

 .button {
  position: absolute;
  top: 50%;
  }
html

  <body style="padding:0px 0px;">
  <div class="swiper-container">
  <div class="swiper-wrapper">
  <div class="swiper-slide red-slide">
     <img src="file:///android_res/drawable/a.jpg" >
 <div class="wrapper">
 <div class="button" >
 <div id="ddmenu">
  <ul>                
    <li>SHARE
        <div>
            <div class="column">
                <a id="sendFacebook" onclick="share(3)" href="#">Email</a>
                <a id="sendMMS" onclick="share1(3)" href="#">MMS</a>

            </div>
        </div>
    </li>      
  </ul>
  </div>
   </div>
  </div>
   </div>

  <div class="swiper-slide blue-slide">
      <img src="file:///android_res/drawable/b.jpg" >
    <div class="wrapper">
<div class="button" >
<div id="ddmenu">
<ul>                
    <li>SHARE
        <div>
            <div class="column">
                <a id="sendFacebook" onclick="share(4)" href="#">Email</a>
                <a id="sendMMS" onclick="share1(4)" href="#">MMS</a>

            </div>
        </div>
    </li>      
  </ul>
  </div>
   </div>
  </div>
   </div>

  • 分享
  • 分享

div id->表示页面上只有一个div class->页面上有多个相同名称的id。尝试将它们更改为类。感谢您的回复,我明白了您的意思,并且我在css文件中将id#ddmenu改为.ddmenu,但仍然无法获得它,因为在js文件中有一个名为getElementsbyId@Thomaswood的函数。一个简单的修复方法是给它们一个“ddmenu”类和一个“ddmenu-#”id