Question

我正在尝试在图像的底部a创建一个div，当单击，显示和再次单击时，隐藏。我可以让它只与其中一个div一起工作，但我试图为所有包含相同ID的人做这个。

我是第一次尝试让div最初隐藏起来而且不能。谢谢你的帮助。

$(document).ready(function() {
  var $dropdown= $('#project-description');
  $dropdown.hide()
  $('#project-dropdown').each(function(){
    $('#project-dropdown').click(function() {
      if ($menu.is(':visible')) {
        $menu.slideUp("medium", function() {
          $menu.hide();
        });
      }
      else {
        $menu.slideDown("medium");
      }
    });
  });
});

更新：我更接近我正在寻找的东西。现在，我正在使用课程，但所有的div都是开放式和近距离的。有没有办法让他们彼此独立？

的jQuery

$(document).ready(function () {
  var $dropdown = $('.description-dropdown');
  var $container = $('.description-container');
  $dropdown.hide();

  // $($menu).each(function () {
    $($container, $dropdown).click(function () {
      if ($dropdown.is(':visible')) {
        $dropdown.slideUp("medium", function () {
          $dropdown.hide();
        });
      } else {
        $dropdown.slideDown("medium");
      }
    });
  // });
});

Div被操纵

<div class="container description-container">
  <div class="ui divider center aligned"><i class="chevron down icon"></i></div>
  <div class="description description-dropdown">
    <p><%- project.description %></p>
  </div>
</div>

Answer 1

问题在于您是否尝试使用ID。 ID只能引用一个元素，应该使用一个类来代替它。

使用类可以将同一个类设置为mutliple元素，然后在需要时调用它们。

当谈到课程时，你使用点而不是哈希。

希望这可以帮助你

＆＃13;

$(document).ready(function()
    {
    var $dropdown = $('.project-description');
    var $menu = $('.menu');
    //$dropdown.hide();

    $($dropdown).each(function()
        {
        $($dropdown).click(function()
            {
            if ($menu.is(':visible'))
                {
                $menu.slideUp("medium", function()
                    {
                    $menu.hide();
                    });

                }
            else
                {
                $menu.slideDown("medium");
                }
            });
        });
    });

＆＃13;

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

</head>

<body>
	<div class="project-description">
		INFORMATION BLAH BLAH
	</div>

	<br>

	<select class="menu">
		<option value="volvo">Volvo</option>
		<option value="saab">Saab</option>
		<option value="mercedes">Mercedes</option>
		<option value="audi">Audi</option>
	</select>

	<select class="menu">
		<option value="cake">cake</option>
		<option value="pizza">pizza</option>
		<option value="garlic bread">garlic bread</option>
		<option value="mac n cheese">mac n cheese</option>
	</select>

	<select class="menu">
		<option value="games">games</option>
		<option value="movies">movies</option>
		<option value="music">music</option>
	</select>
</body>
</html>

＆＃13;

Answer 2

要使它们独立滑动，您需要让事件代码仅对单击的元素进行操作。要做到这一点，你需要找到被点击的容器内的下拉列表：

$($container).click(function () {
    var dd = $(this).find(".description-dropdown");
    if (dd.is(':visible')) {
        dd.slideUp("medium");
    } else {
        dd.slideDown("medium");
    }
});

请注意，由于slideUp执行隐藏，因此不需要在.slideUp内调用.hide。

jquery通过ID来迭代/显示div

2 个答案: