样式链接仅在有时或仅在按特定顺序打开/关闭链接后才起作用

时间:2016-04-26 23:21:55

标签: javascript html css twitter-bootstrap

http://www.tweeturrep.com.s3-website-us-east-1.amazonaws.com/index.html

出于某种原因,当我将样式添加到顶部的导航栏时,链接开始有时只能工作。例如,您无法点击输入您的邮政编码,直到您打开并关闭投票模式。此外,如果您将鼠标悬停在视频链接上,它将更改为指针,然后返回,您无法点击。 idk什么会继续,但我认为它与引导程序的东西有关

<div class="content" position="absolute">
<table position="absolute">
  <tr>
    <td class="navOPtion">
    <img class ="navImage" src="navicon.png">
    </td>
    <td class="navOPtion" id="hideNav5">
    <a style="color:white" href="index.html" id="home">home</a>
    </td>
    <td class="navOPtion" id="hideNav1">
    <a style="color:white" href="videos.html" id="videos" >videos</a>
    </td>
    <td class="navOPtion" id="hideNav">
    <a style="color:white" href="resume.html" target="blank" id="resume">resume</a>
    </td>
    <td class="navOPtion" id="hideNav2">
    <a style="color:white" data-toggle="modal" data-target="#myModal1">
        about
      </a>
    </td>
    <td class="navOPtion" id="hideNav3">
    <a style="color:white" href="blog.html">blog</a>
    </td>
    <td class="navOPtion" id="hideNav4">
      <a  style="color:white" data-toggle="modal" data-target="#myModal">
        votes
      </a>
    </td>
  </tr>
  <tr>
    <td class="title" colspan="7">
      tweetUrRep
    </td>
  </tr>
  <tr>
    <td class="search" colspan="7">
      <form  id="find_overlords" align="center">
        <form action="" id="find_overlords" type="post">
          <input type="text" id="user_Zip" name="zip" placeholder="Zip code" style="width:225px; height:75px; 
          font-size:20pt" class="input33"></input>
          <input type="image" src="search-13-128.png" name="saveForm"     class="smallSearchIcon" id="saveForm" >
          <br>
          <input type="image" src="search-13-128.png" name="saveForm"     class="searchIcon" id="saveForm" >
      </form>
    </td>
  </tr>
</table>

css:

table{
    position:static;
    margin:auto auto auto auto;
    color:white;
    width:100%;
}
  .navImage {
    height: 50px;
    width: 75px;
    cursor: pointer;
}
.navOPtion{
    width:10%;
}

#hideNav{
    display:none;
    font-size: 30px;
}

#hideNav2{
    display:none;
    font-size: 30px;
}

#hideNav3{
    display:none;
    font-size: 30px;
}

#hideNav4{
    display:none;
    font-size: 30px;
    color:white;
}

#hideNav5{
display:none;
font-size: 30px;
color:white;
}

#hideNav1{
display:none;
font-size: 30px;
color:white;
}

显示hideNavs的javascript:

$(document).ready(function(){
$('.navImage').click(function(){
    $('#hideNav').slideToggle('fast');
    $('#hideNav1').slideToggle('fast');
    $('#hideNav2').slideToggle('fast');
    $('#hideNav3').slideToggle('fast');
    $('#hideNav4').slideToggle('fast');
    $('#hideNav5').slideToggle('fast');
  });
});

0 个答案:

没有答案