Question

我正在尝试使用JQuery切换功能，但无法正常使用。它不是平滑地上下滑动，而是非常快速而不是以动画方式我希望在我的代码中实现滑动效果，例如this具有（请参阅网站设计，重新设计服务滑块）：

这是我的代码：

HTML：

<div>
     <div class="jquery_inner_mid">
            <div class="main_heading">
                <a href="#">
                    <img src="features.jpg" alt="" title="" border="0" /></a>
            </div>

            <div class="plus_sign">
                <img id="imgFeaturesEx" src="images/plus.jpg" alt="" title="" border="0" />
                <img id="imgFeaturesCol" src="images/minus.jpg" alt="" title="" border="0" /></div>
            <div class="toggle_container">
                <div id="divMain" >
                </div>
            </div>
        </div>
        <div class="jquery_inner_mid">
            <div class="main_heading">
                <img src="About.jpg" alt="" title="" /></div>
            <div class="plus_sign">
                <img id="imgTechnoEx" src="images/plus.jpg" alt="" title="" border="0" />
                <img id="imgTechnoCol" src="images/minus.jpg" alt="" title="" border="0" /></div>
            <div class="toggle_container">
                <div id="divTechnossus" >
                </div>
            </div>
        </div>
    </div>

JQuery的：

 $(function() {

            document.getElementById('imgFeaturesCol').style.display = 'none';
            document.getElementById('imgTechnoCol').style.display = 'none';


            $('#imgFeaturesEx').click(function() {


                $.getJSON("/Visitor/GetFeatureInfo", null, function(strInfo) {
                    document.getElementById('divMain').innerHTML = strInfo;
                });
                $("#divMain").toggle("slow");
                document.getElementById('imgFeaturesEx').style.display = 'none';
                document.getElementById('imgFeaturesCol').style.display = 'block';
            });
            $('#imgFeaturesCol').click(function() {
                document.getElementById('divMain').innerHTML = "";
                $("#divMain").toggle("slow");
                document.getElementById('imgFeaturesCol').style.display = 'none';
                document.getElementById('imgFeaturesEx').style.display = 'block';
            });

            $('#imgTechnoEx').click(function() {
                $.getJSON("/Visitor/GetTechnossusInfo", null, function(strInfo) {
                    document.getElementById('divTechnossus').innerHTML = strInfo;
                });
                $("#divTechnossus").slideToggle("slow");
                document.getElementById('imgTechnoEx').style.display = 'none';
                document.getElementById('imgTechnoCol').style.display = 'block';
            });
            $('#imgTechnoCol').click(function() {
                document.getElementById('divTechnossus').innerHTML = "";
                $("#divTechnossus").slideToggle("slow");
                document.getElementById('imgTechnoCol').style.display = 'none';
                document.getElementById('imgTechnoEx').style.display = 'block';
            });
  });

编辑：我也想优化这段代码（coz代码不是很干净+行数也可能会减少）。我不知道JQuery的正确编码标准。我是JQuery人员的新手，所以请告诉我正确的路径，以便我可以优化这个愚蠢的代码。

Answer 1

我无法拒绝优化您的代码以便与jQuery一起使用。

当你已经包含jQuery

时，为什么你在那里进行了所有getElementById次调用，这令我感到困惑

试试这个：

( function() {
        $( [ '#imgFeaturesCol', '#imgTechnoCol' ] ).hide();

        $('#imgFeaturesEx').click(function() {
            $.getJSON("/Visitor/GetFeatureInfo", null, function(strInfo) {
                $( '#divMain' ).html( strInfo )
                               .slideToggle( "slow" );
            });
            $( '#imgFeaturesEx' ).hide();
            $( '#imgFeaturesCol' ).show();
        });
        $('#imgFeaturesCol').click(function() {
            $( '#divMain' ).html( "" )
                           .slideToggle( "slow" );
            $( '#imgFeaturesCol' ).hide();
            $( '#imgFeaturesEx' ).show();
        });

        $('#imgTechnoEx').click(function() {
            $.getJSON("/Visitor/GetTechnossusInfo", null, function(strInfo) {
               $( '#divTechnossus').html( strInfo )
                                   .slideToggle( "slow" );
            });
            $( '#imgTechnoEx' ).hide();
            $( '#imgTechnoCol' ).show();
        });
        $('#imgTechnoCol').click(function() {
            $( '#divTechnossus').html( "" )
                                .slideToggle( "slow" );
            $( '#imgTechnoCol' ).hide();
            $( '#imgTechnoEx' ).show();            
        });
})();

Answer 2

使用slideToggle('slow');代替toggle();

Answer 3

Jacob Relkin为您的代码提供了一个很好的替代方案，我借此机会向这个帖子的观众提供从javascript编码到jquery编码的一些规则：

1 - 将所有document.getElementById('element')替换为$('element')

2 - 对于所有css样式，使用函数$('element').css("name","value");

3 - 隐藏和显示在同一元素上，您可以使用toggle或slideToggle函数及其效果（慢，快......）

JQuery帮助：toggle（）无法正常工作

3 个答案: