Question

单击锚元素时。应显示2个div元素及其内容（例如从隐藏到可见）。

所以这是我的代码，我正在做什么，但没有任何工作，请帮助如何做到这一点。

<div>     
  <a href="#one #onesection" class="parentclass">One</a>
<div>
<div id="one" class="childclass"></div>
<div id="onesection" class="subchildclass">this is mysection first</div>

我的一位朋友帮我解决了这个问题，但没有任何效果： -

<a class="parentclass" onClick="openDivs()">One</a>
function openDivs() {
  let child = document.getElementById('one');
  let subChild = document.getElementById('onesection');
}

在这里，我在let中遇到了语法错误，而且它也无法正常工作请检查并告诉我如何解决该问题。我错的地方非常感谢提前。

Answer 1

您可以在jquery中使用.show（）来显示隐藏的html元素。这里应该首先隐藏两个div。即，加载页面时。这是你的html部分

<html>
  <div id="outer_container">

    <div class="main_parent" id="parent1">     
         <a class="parentclass" >One</a>
         <div>
           <div id="one" class="childclass" style="display:none">hiiiii</div>
           <div id="onesection" class="subchildclass" style="display:none">this is mysection first</div>
        </div>
    </div>

    <div class="main_parent" id="parent2">     
      <a class="parentclass">two</a>
      <div>
         <div id="one" class="childclass" style="display:none">hiiiii</div>
         <div id="onesection" class="subchildclass" style="display:none">this is mysection first</div>
      </div>
    </div>


    <div class="main_parent"  id="parent3">     
       <a class="parentclass">three</a>
       <div>
         <div id="one" class="childclass" style="display:none">hiiiii</div>
         <div id="onesection" class="subchildclass" style="display:none">this is mysection first</div>
      </div>
    </div>

  </div>
</html>

这是你的脚本/ jQuery部分

jQuery(document).ready(function($) {
    $('.parentclass').click(function(event){
      var clicked_id = $(this).closest('.main_parent').attr('id');
        $('#'+clicked_id).find('#one,#onesection').show();
        $('#outer_container').find('.main_parent:not(#'+clicked_id+')').find('#one,#onesection').hide();
    });
});

也有一些错误。您没有关闭放置锚标记的第一个<div>。

这是一个更新的 jsfiddle： https://jsfiddle.net/melvinstanly/g8am7owh/19/

Answer 2

@crazy尝试以下解决方案

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
           $(".parentclass").click(function(){
               $('.childclass').hide();
               $('.subchildclass').hide();
               var parentID = $(this).parent().prop("id");
               $("#" + parentID + " .childclass").show();
               $("#" + parentID + " .subchildclass").show();
           });
        });
    </script>
</head>
<body>
    <div id="section1">     
        <a class="parentclass" href="#">One</a>
        <div>
            <div class="childclass" style="display:none">hiiiii1</div>
            <div id="onesection" class="subchildclass" style="display:none">this is mysection first</div>
        </div>
    </div>
    <div id="section2">     
        <a href="#" class="parentclass">two</a>
        <div>
            <div class="childclass" style="display:none">hiiiii2</div>
            <div id="onesection" class="subchildclass" style="display:none">this is mysection second</div>
        </div>
    </div>  
    <div id="section3">     
        <a href="#" class="parentclass">three</a>
        <div>
            <div class="childclass" style="display:none">hiiiii3</div>
            <div id="onesection" class="subchildclass" style="display:none">this is mysection Third</div>
        </div>
    </div>
</body>
</html>

Answer 3

试试这个，纯粹的JavaScript。

function openDivs()
{
    document.getElementById("one").style.display="Block";
    document.getElementById("onesection").style.display="Block";
}

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

</head>
<body>
 <div>     
     <a onclick="openDivs()" class="parentclass">One</a>
     <div>
     <div id="one" class="childclass" style="display:none">hiiiii</div>
     <div id="onesection" class="subchildclass" style="display:none">this is mysection first</div>
    </div>
    </div>
</body>
</html>

Answer 4

功能openDivs（e） { $（e.getAttribute（ 'href' 属性））显示（）; }

 <div>     
 <a onclick="openDivs(this)" href="#one,#onesection" class="parentclass">One</a>
 <div>
 <div id="one" class="childclass" style="display:none">ttttt</div>
 <div id="onesection" class="subchildclass" style="display:none">this is mysection first</div>
</div>

在锚点标签点击我想显示2 div

4 个答案: