0

大家好，我希望图像在 jquery 中展开和折叠，所以这是我的代码......

 <div id="expand_image" style="border-top:1px solid #000">
 <img src="http://www.hurriyet.com.tr/_np/7181/17287181.jpg" hspace=5/>
 </div>
 <div id="expand_image">
 <img src="http://www.hurriyet.com.tr/_np/2790/17282790.jpg" hspace=5 />
 </div>
 <div id="expand_image">
 <img src="http://www.hurriyet.com.tr/_np/6751/17286751.jpg" hspace=5  />
 </div >
 <div id="expand_image">
 <img src="http://www.hurriyet.com.tr/_np/7203/17287203.jpg"  hspace=5 />
 </div>
 </div>

下面是css样式

 #expand_image { overflow:hidden; float:left; height:100px; margin:0 5px; border-bottom: 1px solid #000; cursor:pointer; }

jquery代码如下...

  $(function() {
   $("#expand_image ").click(function() {

     var imgwidth = this.width;
     var imgheight = this.height;
    $a=300;
    $b=this.height;
      alert(this.width + 'x' + this.height);



      if ($a==$b )
    {
    alert('300');
       $(this).css('height', '100');
       $(this).css('width', '580');   
    }
    else
    {
      alert('100'); 
       $(this).css('height', '300');
       $(this).css('width', '580'); 
    }       
    });
    });

所以我想要的是..当我点击一张图片时它应该展开而其他人应该折叠..而如果我点击展开的图片它应该折叠

所以我试图获得图像高度

所以如果它的 300 然后折叠，否则展开

但输出

alert(this.width + '-' + this.height);

是 ：

在此处输入图像描述

有人知道吗？提前致谢..：）

4

3 回答 3

1

高度和宽度是函数，所以你需要调用height()而不是height（注意大括号），试试这个：

alert(this.width() + '-' + this.height());
于 2012-07-24T05:25:04.873 回答
1

切勿使用相同的 ID

在您的 HTML 上，您使用<div id="expand_image"的会导致查找元素出现问题。

参考现场演示

HTML：

<div class="expand_image" style="border-top:1px solid #000">
    <img src="http://www.hurriyet.com.tr/_np/7181/17287181.jpg" hspace=5/>
</div>
<div class="expand_image">
    <img src="http://www.hurriyet.com.tr/_np/2790/17282790.jpg" hspace=5 />
</div>
<div class="expand_image">
    <img src="http://www.hurriyet.com.tr/_np/6751/17286751.jpg" hspace=5  />
</div >
<div class="expand_image">
    <img src="http://www.hurriyet.com.tr/_np/7203/17287203.jpg" hspace=5 />
</div>

JS：

$(function() {
    $(".expand_image").click(function() {
        $(this).css({
            'height':'300',
            'width':'580'
        });
        $(".expand_image").not(this).css({
            'height':'100',
            'width':'580'
        });
    });
});

CSS：

.expand_image { 
    overflow:hidden; 
    float:left; 
    height:100px; 
    margin:0 5px; 
    border-bottom: 1px solid #000; 
    cursor:pointer; 
}
于 2012-07-24T05:36:42.847 回答
1

首先将您的 div 放入包装器中，然后按类而不是 id 引用它们...因为您具有相同的 id，这将避免冲突：

<div id="wrapper"> 
<div class="expand_image" style="border-top:1px solid #000">
 <img src="http://www.hurriyet.com.tr/_np/7181/17287181.jpg" hspace=5/>
 </div>
 <div class="expand_image">
 <img src="http://www.hurriyet.com.tr/_np/2790/17282790.jpg" hspace=5 />
 </div>
 <div class="expand_image">
 <img src="http://www.hurriyet.com.tr/_np/6751/17286751.jpg" hspace=5  />
 </div >
 <div class="expand_image">
 <img src="http://www.hurriyet.com.tr/_np/7203/17287203.jpg"  hspace=5 />
 </div>
 </div>​

通过将它放在 div 包装器中，您不必启动 expand_image 类的每个实例，因此此代码将执行得更好：

$("#wrapper").on("click", ".expand_image", function () {
    if ($(this).height() == 300) {
       $(this).css('height', '100'); 
    } else {
       $(".expand_image").css('height', '100'); 
       $(this).css('height', '300');   
    }   
});

通过将 #expand_image 更改为 .expand_image 来更新您的 CSS

.expand_image { overflow:hidden; float:left; height:100px; margin:0 5px; border-bottom: 1px solid #000; cursor:pointer; } ​

它会起作用的！ 这是一个 JSFIDDLE 示例

于 2012-07-24T05:38:48.650 回答