jquery - 当我用图像替换切换导航文本链接时，从双击变为单击？

Question

当您单击我的导航项/li 时，会滑出一个内容框。我现在希望每个导航项都是自定义图像，单击时会导致相应的内容框滑出。

一切正常，直到我将导航“li”从文本切换到图像。现在要切换打开内容框，图像需要双击，而不是纯文本时单击。谁能指出我正确的方向将双击更改为单击？

在我的示例中，我仅将三个导航项（关于）中的第一个更改为图像以显示双击问题： My Fiddle

HTML

<nav id="nav">
   <ul>
      <li><a href="#about" class="open"><img src="images/pgtitle-about.png" title="About" />   </a></li>
      <li><a href="#gallery" class="open">Gallery</a></li>
      <li><a href="#contact" class="open">Contact</a></li>
   </ul>
</nav>
</section>
<!------- Content Slide Out ------->
<div id="slide-right">
   <!-------------------- About ---------------------->
   <section class="content" id="about">
      <div id="about-title">
         <h2>About</h2>
      </div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor     incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </section>
   <!-------------------- Gallery ---------------------->
   <section class="content" id="gallery">
      <div id="gallery-title">
         <h2>Gallery</h2>
      </div>
      <p>IMAGE IMAGE IMAGE IMAGE IMAGE IMAGE</p>
   </section>
   <!-------------------- Contact ---------------------->
   <section class="content" id="contact">
      <div id="contact-title">
         <h2>Contact</h2>
      </div>
      <p> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
   </section>
</div>
</div>

jQuery

 $(document).ready(function()
  {
  $('.content').hide();
  $('.open').click(function(event){
    event.preventDefault();
    var targetDiv = $($(this).attr('href'));

    $('.open').removeClass("activeClass");
    if(targetDiv.css("display") == "none")
    {
        $(this).addClass("activeClass");
    }

    targetDiv.siblings().hide(); 
    targetDiv.toggle('slide', {direction: 'left'});
});

$(document).click(function(e)
{
    if($(e.target).hasClass("open") || $("#slide-right").find(e.target).length > 0)
    {

    }
    else
    {
        $('.content').hide();
        $('.open').removeClass("activeClass");
    }
    });
 })

CSS

#sidebar {
    float: left;
    height: 1200px;
    max-width: 180px;
    left: 0;
    position: fixed;
    background: url(../images/bg-nav.png) no-repeat #000;
    z-index: 1;
}

.activeClass {
    text-decoration: none;
}

.content {
    background: #333;
    opacity: .6;
    color: #fff;
    width: 500px;
    min-height: 100%;
    top: 0;
    bottom: 0;
    margin-left: 180px;
    padding: 40px 30px;
    position: absolute;
    border: groove 5px #000;
    overflow: auto;
}

#about-title {
    background: url(../images/pgtitle-about.png) top left no-repeat;
    margin-bottom: 5%;
}

#gallery-title {
    background: url(../images/pgtitle-gallery.png) top left no-repeat;
    margin-bottom: 5%;
}

#contact-title {
    background: url(../images/pgtitle-contact.png) top left no-repeat;
    margin-bottom: 5%;
}

score 0 · Accepted Answer

您的代码中存在某些概念性错误。

       1) When you are clicking on the image, the events target is 
          the <img> and not the <a>. 

       2) Reason for your bug.
             i) When you click on the image, the slider actually opens the content div without you noticing it.

             ii) Before you could notice it, your global $("document").click handler fails the if condition and hides it.

             iii) On the next click of the actual double click the conditions passes and the content is visible now.

       3) Quick fix 

          change your global handler if condtion to  this 

       if($(e.target).hasClass("open") || $(e.target.parentElement).hasClass("open") ||          
         $("#slide-right").find(e.target).length > 0) 

      4) Registering global handlers is not a good idea, instead use blur events or something like that on the context element.

score 0 · Accepted Answer

Here is a pure css3 sample. This is for you to fiddle around. It is not complete.

**CSS**

.slide-menu {
  position: relative;
}
.slide-menu ul {
  background-color: black;
  padding: 10px;
  float: left;
  height: 500px;
  position: relative;
  top: -20px;
}
.slide-menu ul li {
  list-style: none;
}
.slide-menu ul li a {
  color: white;
  display: block;
  text-align: center;
  padding: 5px;
  font-size: 120%;
  cursor: pointer;
  text-decoration: none;
}
.slide-menu ul li a:hover {
  background-color: #0094ff;
}
.slide-menu ul li a img {
  height: 30px;
  width: 30px;
}
.slide-menu .slide-menu-content {
  position: absolute;
  height: 500px;
  background-color: #ccc;
  float: left;
  width: 0;
  -moz-transition: all 1s linear;
  -o-transition: all 1s linear;
  -webkit-transition: all 1s linear;
  transition: all 1s linear;
  display: inline-block;
}
.slide-menu .slide-menu-content:target {
  width: 500px;
}


**Markup**

<section class="slide-menu">

        <ul>
            <li>
                <a href="#about"><img src="../styles/images/Chrysanthemum.jpg" /></a>
            </li>
            <li>
                <a href="#gallary">Gallery</a>
            </li>
            <li>
                <a href="#contact">Contact</a>
            </li>
        </ul>

        <div class="slide-menu-content" id="about">

            <span>Image</span>

        </div>

        <div class="slide-menu-content" id="gallary">
            <span>Gallary</span>

        </div>

        <div class="slide-menu-content" id="contact">
            <span>Contact</span>
        </div>

    </section>

Fiddle around and in the mean time i will complete it

score 0 · Accepted Answer

这是带有一点 javascript 的完整 css 菜单。这种方法非常强大，因为您可以使用哈希值打开任何选项卡。

例如，如果您在另一个页面中有一个链接，请说“../slidemenu.html#menu1/”。当用户单击此链接时，浏览器将移动到打开 Menu1 的 slidemenu.html。

CSS

.slide-menu {
  position: relative;
}
.slide-menu ul {
  background-color: #3c3c3c;
  float: left;
  margin: 0;
  padding: 50px 0;
  height: 400px;
}
.slide-menu ul li {
  position: relative;
  list-style: none;
}
.slide-menu ul li a {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  color: white;
  font-size: 130%;
}
.slide-menu ul li a:hover {
  background-color: #0094ff;
}
.slide-menu .content {
  position: absolute;
  height: 450px;
  z-index: -10;
  margin-top: 1%;
  width: 0;
  overflow: hidden;
  -moz-transition: all 0.5s ease-in;
  -o-transition: all 0.5s ease-in;
  -webkit-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;
  background-color: white;
}
.slide-menu .content:target {
  border: 5px solid black;
  width: 500px;
  overflow: auto;
  left: 8%;
}

标记

<section class="slide-menu">

        <ul class="menu">
            <li>
                <a href="#menu1"><span>Menu1</span></a>
            </li>
            <li>
                <a href="#menu2">Menu2</a>
            </li>
            <li>
                <a href="#menu3">Menu3</a>
            </li>
        </ul>

        <div class="content" id="menu1">
            Menu 1 Content
        </div>

        <div class="content" id="menu2">
            Menu 2 Content
        </div>

        <div class="content" id="menu3">
            Menu 3 Content
        </div>
    </section>

脚本

<script type="text/javascript">

        var menus = document.querySelector(".menu").querySelectorAll("li");

        for (var i = 0; i < menus.length; i++) {
            menus.item(i).onclick = function (evt) {
                var targetId = this.getElementsByTagName('a')[0].getAttribute('href');
                if (targetId == window.location.hash) {
                    window.location.hash = "";
                    evt.preventDefault();
                }
            }
        }

    </script>

jquery - 当我用图像替换切换导航文本链接时，从双击变为单击？

3 回答 3

Related

Reference