Question

基本的想法是我有一堆div，其中每个都可以切换（显示/隐藏）。当切换一个div时，我想要显示当前显示为隐藏的其他div，因此一次只能显示一个div。

它显示了Wordpress中的用户生物，当打开时，只有1个bio应该扩展而不是所有bio。当我使用切换功能时，我当前的代码扩展了所有生物：

<?php
$category_text = get_the_hrb_user_bio($user);

if (strlen($category_text) > $max_lenght) { ?>
    <div class="info short">
        <?php echo substr($category_text, 0, 350) . "..."; ?>
        <br/>
        <a href="javascript:void(0)" class="r_more">Read More..</a>
    </div>

    <div class="info long" style="display:none;">
        <?php echo $category_text; ?>
        <br/>
        <a href="javascript:void(0)" class="r_less">Read less..</a>
    </div>

    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            $('.r_more').click(function () {
                $('.short').hide();
                $('.long').show();
            });
            $('.r_less').click(function () {
                $('.long').hide();
                $('.short').show();
            })
        });
    </script>

<?php } else { ?>
    <div class="info short">
        <?php echo the_hrb_user_bio($user); ?>
    </div>
<?php } ?>

Answer 1

您的代码public class MyClass { public MyClass(){ } public MyClass(XDocument xd) { var t = typeof(MyClass); var o = (MyClass)new XmlSerializer(t).Deserialize(xd.CreateReader()); foreach (var property in t.GetProperties()) property.SetValue(this, property.GetValue(o)); } }或$('.short').hide();隐藏或显示分别具有属性$('.long').show();或class="short"的所有 div。这是解决方案：

class="long"

或者，稍微优化一下

<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('.r_more').click(function() {
            $('.short').show(); //shows all short infos
            $('.long').hide(); //hide all full infos
            var parent = $(this).parent();
            parent.hide(); //shows only one block
            parent.next().show(); //shows only one block
        });
        $('.r_less').click(function() {
            $('.short').show(); //shows all short infos
            $('.long').hide(); //hide all full infos
        });
    });
</script>

Answer 2

解决方案

<div class="freelancer-description">
	<?php 
	$category_text = get_the_hrb_user_bio( $user );
	if (strlen($category_text) > $max_lenght)  { ?>
		<div class="info short">
		<?php echo substr( $category_text,0,350 ) . "..."; ?>
		<br/>
		<a href="javascript:void(0)" class="r_more">Read More..</a>
		</div>

		<div class="info long" style="display:none;">
			<?php echo $category_text; ?>
		<br/>
		<a href="javascript:void(0)" class="r_less">Read less..</a>
		</div>

	<script type="text/javascript">
	jQuery(document).ready(function($) {
	$('.r_more').click(function() {
	$(this).parents('.freelancer-description').find('.short').hide();
	$(this).parents('.freelancer-description').find('.long').show();
	});
    $('.r_less').click(function() {
	$(this).parents('.freelancer-description').find('.long').hide();
	$(this).parents('.freelancer-description').find('.short').show();
	})
	});
	</script>
		<?php } else { ?> 
		<div class="info short">
		<?php echo the_hrb_user_bio( $user ); ?>
		</div>
	<?php } ?> 
			</div>

Jquery切换（显示1 div在激活切换时隐藏其余部分）

2 个答案: