元素不会显示 js 切换功能

Question

我有一些 js 切换代码，过去对我有用，但在我为另一个项目更改它后就不起作用了。出于某种原因，有一个 display:none; 属性不会切换。可能是因为我移动了要切换的div；最初它是在触发 div 之后直接出现的，但我现在将它放在一个单独的 li 元素中。我是一名业余编码员，对发生的事情有点困惑。非常感谢任何帮助！

这是一个 fiddle： https://jsfiddle.net/mfqa5ahb/1/

当我检查 fiddle 的 html 时，它显示为 div 的一个属性，我想切换 (davebiobox):

element.style {
display: none;
}

如果我暂时禁用此属性并单击 view/hide bio 按钮，它会正确切换一次，然后重置为 display:none;

代码如下：

HTML:

<div class="ourteamlist">
            <ul>
                <li>
                    <img src="images/slide4/larry.jpg" class="profilepic" alt="Profile Pic">
                    <div class="lilbluebox">
                        <div class="teambox">
                            <ul>
                                <li>
                                    <p class="whitetext">Dave Henderson</p>
                                    <h4>CPA, CA, Partner</h4>
                                </li>
                                <li>
                                    <div id="daveshowbio" class="viewbio">VIEW BIO</div>
                                </li>
                            </ul>
                        </div>
                    </div>

                </li>
                <li>
                    <div id="davebiobox">
                        <div class="bioleft">
                            <p>Dave Henderson</p>
                        </div>
                        <div class="bioright">
                            <p>DAVE DAVE DAVE DAVE DAVE DAVE</p>
                        </div>
                    </div>
                </li>
            </ul>
            </div>

CSS:

.ourteamlist{
max-width:1200px;
padding-left:30px;
padding-right:10px;
background-color:#eeeeee;
text-align:center;
margin:0 auto;
margin-left:-1px;
clear:both;
}
.ourteamlist ul li{
display:inline-block;
margin-right:-3px;
text-align:left;
margin-top:1px;
}
.profilepic{
height:205px;
width:299px;
padding-left:0px;
padding-right:1px;
padding-bottom:1px;
}
.lilbluebox{
background-color:#FFFFFF;
margin-top:-5px;
width:299px;
height:80px;
}
.teambox{
padding-left:30px;
padding-top:20px;
width:100%;
}
.teambox ul li{
display:inline-block;
}
.viewbio{
font-size:11px;
font-weight:600;
text-align:right;
margin-right:30px;
color:#888888;
cursor:pointer;
letter-spacing:1px;
}

.teambox ul li a{
text-decoration: none;
}

#davebiobox{
position:relative;
display:inline-block;
max-width:1200px;
height:287px;
background:#FFFFFF;
}
#davebiobox:after{
content:"";
position:relative;
display:block;
width:0;
height:0;
}
.bioleft{
position:relative;
float:left;
width:50%;
}
.bioright{
position:relative;
float:right;
width:50%;
}

JS:

 $(document).ready(function () {
$(".viewbio").click(function() {
    var $self = $(this);
    var originalText = $self.text().trim();

    $(".viewbio").text("VIEW BIO");

    if (originalText == "VIEW BIO") {
        $self.text("HIDE BIO");
    }

});
});

$(document).ready(function () {
var $slides = $('#davebiobox').hide();
$('#daveshowbio').show().click(function () {
    var $slider = $(this).next("#davebiobox");
    if (!$slider.length){
        $slider = $(this).closest("#davebiobox");
    }
    $slides.not($slider).stop(true, true).slideUp();
    $slider.stop(true, true).slideToggle(0);
});
});

非常感谢！

Answer 1

我对这段代码进行了一些调整并想出了这个。

$(document).ready(function () {
    
    $(".viewbio").click(function() {
        var $self = $(this);
        var originalText = $self.text().trim();

        $(".viewbio").text("VIEW BIO");

        if (originalText == "VIEW BIO") {
            $self.text("HIDE BIO");
        }

    });
    
 var $slides = $('#davebiobox').hide();
 $('#daveshowbio').show().click(function () {
     var $slider = $("#davebiobox");
        $slider.stop(true, true).slideToggle();
 });
});

.ourteamlist{
 max-width:1200px;
 padding-left:30px;
 padding-right:10px;
 background-color:#eeeeee;
 text-align:center;
 margin:0 auto;
 margin-left:-1px;
 clear:both;
}
.ourteamlist ul li{
 display:inline-block;
 margin-right:-3px;
 text-align:left;
 margin-top:1px;
}
.profilepic{
 height:205px;
 width:299px;
 padding-left:0px;
 padding-right:1px;
 padding-bottom:1px;
}
.lilbluebox{
 background-color:#FFFFFF;
 margin-top:-5px;
 width:299px;
 height:80px;
}
.teambox{
 padding-left:30px;
 padding-top:20px;
 width:100%;
}
.teambox ul li{
 display:inline-block;
}
.viewbio{
 font-size:11px;
 font-weight:600;
 text-align:right;
 margin-right:30px;
 color:#888888;
 cursor:pointer;
 letter-spacing:1px;
}

.teambox ul li a{
 text-decoration: none;
}

#davebiobox{
 position:relative;
 display:inline-block;
 max-width:1200px;
 height:287px;
 background:#FFFFFF;
}
#davebiobox:after{
 content:"";
 position:relative;
 display:block;
 width:0;
 height:0;
}
.bioleft{
 position:relative;
 float:left;
 width:50%;
}
.bioright{
 position:relative;
 float:right;
 width:50%;
}

<div class="ourteamlist">
    <ul>
     <li>
      <img src="images/slide4/larry.jpg" class="profilepic" alt="Profile Pic">
      <div class="lilbluebox">
       <div class="teambox">
        <ul>
         <li>
          <p class="whitetext">Dave Henderson</p>
          <h4>CPA, CA, Partner</h4>
         </li>
         <li>
          <div id="daveshowbio" class="viewbio">VIEW BIO</div>
         </li>
        </ul>
       </div>
      </div>
      
     </li>
     <li>
      <div id="davebiobox">
       <div class="bioleft">
        <p>Dave Henderson</p>
       </div>
       <div class="bioright">
        <p>DAVE DAVE DAVE DAVE DAVE DAVE</p>
       </div>
      </div>
     </li>
    </ul>
    </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

元素不会显示 js 切换功能

elements won't display for js toggle function

html

javascript

css

jquery

slidetoggle