Javascript 元素赢得'；js切换功能的t显示

我有一些js切换代码，在过去对我有用，但在我为另一个项目修改后就不起作用了。由于某种原因，出现

显示：无不会切换的属性。
可能是因为我移动了要切换的div；最初它直接出现在触发div之后，但现在我将它放在一个单独的li元素中。
我是一个业余程序员，对正在发生的事情有点困惑。非常感谢您的帮助

这是一把小提琴：

当我检查fiddle的html时，它显示为我想要切换的div（davebiobox）的一个属性：

如果我临时禁用此属性并单击查看/隐藏bio按钮，它将正确切换一次，然后重置为
display:none

代码如下：

HTML:

JS:

非常感谢
 我对这段代码进行了一些调整，并得出了以下结论


$（文档）.ready（函数（）{
$（“.viewbio”）。单击（函数（）{
var$self=$（本）；
var originalText=$self.text（）.trim（）；
$（“.viewbio”）.text（“查看BIO”）；
如果（原始文本==“查看生物”）{
$self.text（“隐藏BIO”）；
}
});
var$slides=$（'#davebiobox'）.hide（）；
$（'#daveshowbio'）。显示（）。单击（函数（）{
变量$slider=$（“#davebiobox”）；
$slider.stop（true，true.slideToggle（）；
});
});
.ourteamlist{
最大宽度：1200px；
左侧填充：30px；
右边填充：10px；
背景色：#eeeeee；
文本对齐：居中；
保证金：0自动；
左边距：-1px；
明确：两者皆有；
}
.我们的团队列表ul li{
显示：内联块；
右边距：-3px；
文本对齐：左对齐；
页边顶部：1px；
}
.profilepic{
身高：205px；
宽度：299px；
左侧填充：0px；
右侧填充：1px；
垫底：1px；
}
LillBluebox先生{
背景色：#FFFFFF；
页边顶部：-5px；
宽度：299px；
高度：80px；
}
.teambox{
左侧填充：30px；
填充顶部：20px；
宽度：100%；
}
李先生{
显示：内联块；
}
.viewbio{
字体大小：11px；
字号：600；
文本对齐：右对齐；
右边距：30px；
颜色：#888888；
光标：指针；
字母间距：1px；
}
.teambox ul li a{
文字装饰：无；
}
#达维博克斯{
位置：相对位置；
显示：内联块；
最大宽度：1200px；
高度：287px；
背景：#FFFFFF；
}
#达维博克斯：之后{
内容：“；
位置：相对位置；
显示：块；
宽度：0；
身高：0；
}
B.左撇子{
位置：相对位置；
浮动：左；
宽度：50%；
}
B.生物权利{
位置：相对位置；
浮动：对；
宽度：50%；
}





戴夫·亨德森

注册会计师、注册会计师、合伙人


查看个人资料




戴夫·亨德森

戴夫




element.style {
display: none;
}

<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>

.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%;
}

 $(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);
});
});