Show/hide div link 点击

Question

嘿，我有连续的项目，当我点击它们或悬停时，我希望另一个 div 出现在下面，

我有这个 html。

<div id="projectspace">
   <div class="project">
        <a href="#" class="showdiv"><img src="images/gird systems.png" width="160px" /></a>
        <a class="viewbutton" href="pdf/grid systems.pdf">View</a>
   </div>

   <div class="project">
       <a href="#" class="showdiv"><img src="images/peace one day.jpg" width="160ppx" /></a>
       <a class="viewbutton" href="images/peace one day.jpg">View</a>
   </div>

   <div class="project">
       <a href="#" class="showdiv"><img src="images/dan_test.jpg" width="160ppx" /></a>
       <a class="viewbutton" href="images/dan_test.jpg">View</a>
   </div>
</div>

<div  class="hoverdiv">
    <div id="info">
        <p> some text.</p>
    </div>

    <div class="description">
       <p>some text</p>
    </div>
</div>

这个用于查询

jQuery(document).ready(function() {
    Query(".showdiv").click(function() {
        jQuery(".hoverdiv").find(".description", this).toggle();

        return false;   
     });
});

有人有更好的解决方案吗？

谢谢

Answer 1

您可能想试试这个；

$(".showdiv").mousedown(function(){
    $("div to show").show()
});

$(".showdiv").mouseup(function(){
    $("div to hide").hide()
});

Answer 2

你可以为悬停做这样的事情：

var hoverDivDescription = $(".hoverdiv").find(".description");

$(".showdiv").on("mouseenter mouseleave", function(ev) {
  if (ev.type == "moouseenter") {
    hoverDivDescription.show();
  } else {
    hoverDivDescription.hide();
  }
});

或点击：

var hoverDivDescription = $(".hoverdiv").find(".description");

jQuery(function($) {
  $(".showdiv").on("click", function(ev) {
    ev.preventDefault();
    hoverDivDescription.toggle();
  });
});

有关点击的示例，请参阅此代码笔（点击图像有效）：http://codepen.io/anon/pen/GgNWNR?editors=101

Show/hide div link 点击

Show/hide div on link click

html

jquery

click

show

hide