Question

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

这是一个小提琴： https://jsfiddle.net/mfqa5ahb/1/

当我检查小提琴的html时，这显示为我想切换的div的属性（davebiobox）：

element.style {
display: none;
}

如果我暂时禁用此属性并单击查看/隐藏生物按钮，则会正确切换一次，然后重置为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切换功能

1 个答案: