Ajax下拉效果在多个实例中

时间:2015-08-28 00:13:40

标签: javascript php jquery html ajax

在我网站的员工页面中,我在ajax中有一个下拉菜单,其中包含每位员工的信息。问题是,当我在同一页面中打开多个下拉菜单/框时,我将尝试打开的行中的第二个菜单/框将在第一次单击时快速打开和关闭,并在第二次单击时将正确打开。

那么我该怎样才能解决这个问题,如果其他下拉菜单打开了,那么下拉菜单会以正确的方式打开吗?

Staff.php:

<script>
var staff=0;
function show_staffinfo(i)
    {
        staff++;
        $.ajax({
                type: "POST",
                data: { 'id' : i,'cnt':staff},
                url:"staff_show.php",
                success:function(result){
                    $("#staffinfo2_"+i). replaceWith(result);
                }
        });          
    }
</script>

<?php
$sa = mysqli_query($link,"select id,username,motto,role_description,look from users where rank=8");

while($fa=mysqli_fetch_array($sa)) {
?>
<div class="stafflist1" id="stafflist1_<?php echo $fa['motto'];  ?>">
    <div class="picsizstaff">
        <div class="picstaff" style="background: url(http://www.bobbaitalia.it/ba-simple-proxy.php?url=http://www.habbo.it/habbo-imaging/avatarimage?figure=<?php echo $fa['look'];  ?>&action=null&direction=3&head_direction=3&gesture=srp&size=b&img_format=gif) repeat scroll 0 0 "></div>
        </div>
        <div class="staff_num">
            <div ><?php echo $fa['username']; ?></div>
            <div id="staff_info"><?php echo $fa['motto']; ?> |</div>
        </div>
        <div class="pointer"><img class="point" id="point_<?php echo $fa['id'];  ?>" src="image/pointdown.png" onClick="show_staffinfo(<?php echo $fa['id'];  ?>)" ></div>
    </div>
    <div class="staffinfo2" style="display:none;" id="staffinfo2_<?php echo $fa['id'];  ?>"></div>
<?php } ?>

staff_show.php:

<?php
$sel_st=mysqli_query($link,"select id,username,motto,role_description,facebook_link,twitter_link,instragram_link,as  kme_link,look from users where id='".$_POST['id']."'");

$fet_st=mysqli_fetch_array($sel_st);
$cnt=$_POST['cnt']%2;

if($cnt > 0){ 
?>

<script>
    $( "#staffinfo2_<?php echo $fet_st['id'];  ?>" ).slideDown( "slow" );
</script>

<div class="staffinfo2 " id="staffinfo2_<?php echo $fet_st['id'];  ?>" style="display:none;">
    <div class="think"><?php echo $fet_st['role_description']; ?></div>
    <div class="thinkarrow"><img src="image/think.png"></div>
    <div class="pic_staff">
        <div class="tingpic"><img src="http://labs.habox.org/avatarimage.php?figure=<?php echo $fet_st['look'];  ?>&action=std,wav&gesture=sml&direction=3&head_direction=3&size=n&img_format=png">
            <div class="fbicon">
                <?php if($fet_st['facebook_link']!=null) { ?><a href="<?php echo $fet_st['facebook_link']; ?>" target="_blank"><img src="image/Facebook-icon.png"></a><?php } ?>
                <?php if($fet_st['twitter_link']!=null) { ?> <a href="<?php echo $fet_st['twitter_link']; ?>" target="_blank"><img src="image/Twitter-2-icon.png"></a><?php } ?>
                <?php if($fet_st['instragram_link']!=null) { ?><a href="<?php echo $fet_st['instragram_link']; ?>" target="_blank">
                <img src="image/insta.png"></a><?php } ?>
                <?php if($fet_st['askme_link']!=null) { ?> <a href="<?php echo $fet_st['askme_link']; ?>" target="_blank"> <img src="image/ask.png"></a><?php } ?>
            </div>
        </div>
    </div>
</div>
<?php } else { ?>

<script>
    $("#staffinfo2_<?php echo $fet_st['id'];  ?>").slideUp();
</script>

<div class="staffinfo2" id="staffinfo2_<?php echo $fet_st['id'];  ?>" ></div>
<?php } ?>

1 个答案:

答案 0 :(得分:0)

这是因为你的$cnt=$_POST['cnt']%2; if($cnt > 0)指令。你实际上在做的是每隔一次,而不是显示信息,你实际上是滑动并隐藏它。例如,将其更改为if(1),您将看到报告的问题已解决。

现在你可以向上滑动所有其他 div,但这是你在调用ajax之前或之后可以在js中执行的单独任务。