Question

我有这个脚本http://jsfiddle.net/s2CtY/但我需要修改一下，以便隐藏点击链接。基本上隐藏div的内容取代了点击的链接。

此外，通过PHP在页面上会有多个这样的实例 - 如何停止一次打开全部？

＆＃13;

$(document).ready(function () {
    $('.sub-nav ul').css("display", "none");

    // Watch for clicks on the "slide" link.
    $('.sub-nav-btn').click(function () {
        $(this).next(".sub-nav ul").slideToggle(400);
        return false;
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- script above added by stack snippet -->

<div class="sub-nav">
    <div class="sub-nav-btn">btn1</div>
    <ul>btn1 slide data</ul>
</div>
<div class="sub-nav">
    <div class="sub-nav-btn">btn2</div>
    <ul>btn2 data slide</ul>
</div>
<div class="sub-nav">
    <div class="sub-nav-btn">btn3</div>
    <ul>btn3 data</ul>
</div>

＆＃13;

Answer 1

对于第一部分，这里是working fiddle，只是为了确保这是你想要的，继续你的第二个请求

添加（在你的.click（）函数下面）

$('.sub-nav').on('click', 'ul', function () {
      $(this).prev(".sub-nav-btn").slideToggle(400);
      $(this).slideToggle(400);
      return false;
});

编辑：如果理解正确，您的第二个问题也会得到解决。 example fiddle div的2个实例，在点击时仅显示立即prev（）和next（）

（这是一个很酷的功能：D）

＆＃13;

$(document).ready(function () {
    $('.sub-nav ul').css("display","none");
    // Watch for clicks on the "slide" link.
    $('.sub-nav-btn').click(function () {
        $(this).next(".sub-nav ul").slideToggle(400);
        $(this).slideToggle(400);
        return false;
    });
    $('.sub-nav').on('click', 'ul', function () {
        $(this).prev(".sub-nav-btn").slideToggle(400);
        $(this).slideToggle(400);
        return false;
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="sub-nav">
 <div class="sub-nav-btn">btn1</div>
  <ul>btn1 slide data
  </ul>
</div>
<div class="sub-nav">
 <div class="sub-nav-btn">btn2</div>
  <ul>btn2 data slide
  </ul>
</div>
<div class="sub-nav">
 <div class="sub-nav-btn">btn3</div>
  <ul>btn3 data
  </ul>
</div>
<div class="sub-nav">
 <div class="sub-nav-btn">btn1</div>
  <ul>btn1 slide data
  </ul>
</div>
<div class="sub-nav">
 <div class="sub-nav-btn">btn2</div>
  <ul>btn2 data slide
  </ul>
</div>
<div class="sub-nav">
 <div class="sub-nav-btn">btn3</div>
  <ul>btn3 data
  </ul>
</div>

＆＃13;

Answer 2

不确定您想要什么，但您可以在点击链接时隐藏链接，并在点击详细信息时再次显示该链接，如下所示：

<强>的JavaScript

   $(document).ready(function () {
       $('.sub-nav ul').css("display", "none");
       $(document).on("click", ".sub-nav-btn", function () {
           $(this).next(".sub-nav ul").slideDown(400);
           $(this).hide();
           return false;
       });

       $(document).on("click", ".sub-nav ul", function () {
           $(this).slideUp(400, function () {
               $(this).siblings(".sub-nav-btn").show();
           });
       });
   });

如果我误解了你，请详细说明。

<强> FIDDLE

Answer 3

这也是一个选项。您基本上是从 .sub-nav 中获取孩子并切换它们这假设您只有这两个元素。试试下面的代码段（点击运行代码）

＆＃13;

$(document).ready(function () {
    $('.sub-nav ul').css("display", "none");

    // Watch for clicks on the "slide" link.
    $('.sub-nav-btn, .sub-nav ul').click(function () {
        $(this).parent().children().slideToggle(400);
      
        return false;
    });
});

＆＃13;

* { margin: 0;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- script above added by stack snippet -->

<div class="sub-nav">
    <div class="sub-nav-btn">btn1</div>
    <ul>btn1 slide data</ul>
</div>
<div class="sub-nav">
    <div class="sub-nav-btn">btn2</div>
    <ul>btn2 data slide</ul>
</div>
<div class="sub-nav">
    <div class="sub-nav-btn">btn3</div>
    <ul>btn3 data</ul>
</div>

＆＃13;

显示/隐藏div - 删除点击的链接

3 个答案: