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%;
}

Answer 1

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

       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.