jQuery的：切换问题

Question

我的意图是在要显示和隐藏的链接上显示slidediv ，但是当我以另一种形式或<div>元素实现slidediv时，工具提示div不起作用。

JavaScript：

<script type="text/javascript">
$(function() {
    $('.showhide').click(function() {
        $(".slidediv").slideToggle();
    });
});
</script>

CSS：

<style type="text/css">
.slidediv{
    width: 30%;
    padding:20px;
    background:#EB5E00;
    color:#fff;
    margin-top:10px;
    border-bottom:5px solid #FFF;
}
</style>

PHP和HTML：

echo '<a href=# alt=Image Tooltip rel=tooltip content="<div class=td2><div id=imagcon><img src=img/1.jpg class=tooltip-image/></div><div id=con>'.$friendList['BedRooms'].' bhk </div><div id=con>'.$friendList['property_type'].'</div><div id=con>Area:'.$friendList['CoveredArea'].'</div><div id=con> '.$friendList['Type_cust'].' :'.$friendList['FirstName'].' '.$friendList['LastName'].' </div> <div id=con> 
<a href=# > View All Details </a> 
  </div>
<br/>
  <div id=con> <a href=# class=showhide>';
 echo " <img src='Dealer/images/email_send.png' style='width:22px;height:22px' />";  
 echo ' Contact Advertiser </a>   </div>';
 echo "<div class='slidediv'>
<div id='lgndiv' class='div-0-ryh' >
<div class='div-1-ryh'>
<form  method='post' onsubmit='' action='' target='_blank' class='form-3-ryh'>
<div class='div-4-ryh '>
<table cellpadding='2' cellspacing='0' border='0' class='table-5-ryh'>
        <colgroup>
        </colgroup>
            <tbody class='table-5-ryh'>
            <tr class='tr-8-ryh'>
                <td class='td-9-ryh'>
                    <div class='div-10-ryh'>
                        <span class='span-11-ryh'>Your Name:</span>
                            <input name='name' valtype='name' required='true' class='input-12-ryh' style='background-color:#FFFFFF'>
                    </div>
                    <div class='div-10-ryh'>
                        <span class='span-14-ryh'>Email:</span>
                            <input name='email' valtype='email' required='true' class='input-15-ryh' style='background-color:#FFFFFF'>
                    </div>
                    <div class='div-16-ryh'>
                        <span class='span-17-ryh'>Phone:</span>
                            <input name='phone' required='true' maxlength='13' valtype='phmob' class='input-18-ryh' style='background-color:#FFFFFF'>
                    </div>
                </td>
            </tr>
            <tr class='tr-19-ryh'>
                  <td colspan='2' class='td-20-ryh'>
                    <span id='text5'>This is for verification purpose and will be asked only once.</span>
                  </td>
            </tr>
            <tr class='tr-22-ryh'>
                <td>
                    <span id='text5'>By clicking this you agree to </span><a target='_blank' href='/load/Company/termsconditions' class='a-25-ryh'>Terms and conditions.</a>
                </td>
            </tr>
            <tr>
                <td colspan='2' class='td-27-ryh'>
                <div id='submit_ViewPhnoD11255903' class='div-28-ryh'>
                    <span id='savedetail_ViewPhno_D11255903'>
                    <input type='' value=''  class='input-30-ryh'>
                    </span>
                    <span class='span-31-ryh'>
                        <a href='javascript:void(0);' onclick='jsui.hideCurLyr();pg.closeModalLayer(); return false;' class='a-25-ryh'>Cancel</a>
                    </span>
                </div>
                </td>
            </tr>

            </tbody>
    </table>
</div>

</form>
<div class='div-52-ryh'></div>
</div>
</div>

Answer 1

回显此HTML后，似乎需要将JavaScript添加到页面。 你做完了吗？

另外，看起来好像返回了一些无效的HTML。 但是，这些错误不应影响JavaScript。

$bedrooms     = $friendList['BedRooms'];
$propertyType = $friendList['property_type']
$coveredArea  = $friendList['CoveredArea'];
$custType     = $friendList['Type_cust'];
$fullName     = $friendList['FirstName'].' '.$friendList['LastName'];

// It would appear that this html is broken
// Try fixing this first line and see if that resolve the issue
echo '<a href="#" alt="Image Tooltip" rel="tooltip" content=""></a>';
echo '<div class="td2">';
    echo '<div id="imagcon">';
        echo '<img src="img/1.jpg" class="tooltip-image" />';
    echo '</div>';

    // As a matter of technicality, don't use the same ID more than once
    echo '<div id="con">'.$bedrooms.' bhk </div>';
    echo '<div id="con">'.$propertyType.'</div>';
    echo '<div id="con">Area:'.$coveredArea.'</div>';
    echo '<div id="con"> '.$custType.' :'.$fullNName.' </div>';
    echo '<div id="con"><a href="#"> View All Details </a></div>';
    echo '<br/>';
    echo '<div id="con">';
        echo '<a href="#" class="showhide">';
            echo '<img src="Dealer/images/email_send.png" style="width:22px;height:22px" /> Contact Advertiser ';
        echo '</a>';
    echo '</div>';
    echo '<div class="slidediv">';
        echo '<div id="lgndiv" class="div-0-ryh">';
            echo '<div class="div-1-ryh">';
                echo '<form method="post" onsubmit="" action="" target="_blank" class="form-3-ryh">';
                    echo '<div class="div-4-ryh">';
                        echo '<table cellpadding="2" cellspacing="0" border="0" class="table-5-ryh">';
                            echo '<colgroup></colgroup>';
                            echo '<tbody class="table-5-ryh">';
                            echo '... rest of the form ...';
                            echo '</tbody>';
                        echo '</table>';
                    echo '</div>';
                echo '</form>';
                echo '<div class="div-52-ryh"></div>';
            echo '</div>';
        echo '</div>';
    echo '</div>';
echo '</div>';

如果您的JavaScript加载或在此html被响应后呈现，那么我建议您也像这样添加它：

<script type="text/javascript">
// This should be equivalent to document.ready()
$(function() {
    // See if your element exists or not
    if($('.showhide').length){
        $('.showhide').click(function() {
            $(".slidediv").slideToggle();
            return false;
        });
    } else {
        // If you have a console in your browser (not everyone does)
        // and calling console.log() may generate errors on older IEs
        if(window.console){
            console.log('.showhide was not found');
        }
    }
});
</script>