DIV,CSS如何实现“加减号”“显示隐藏”效果

html-css023

DIV,CSS如何实现“加减号”“显示隐藏”效果,第1张

<script type="text/javascript" src="js/jq.js"></script><!--这里要引入jQuery库-->

<script type="text/javascript">

$(function(){

    $(".icon").click(function(){

        if($(this).html()=="+"){

        $(this).html("-")

        }

        else{

            $(this).html("+")

        }

        $(".content p").toggle(100)

    })

})

</script>

<style type="text/css">

*{margin:0padding:0font:12px/16px 宋体}

.divcon{width:300pxdisplay:inline-tablepadding:10pxborder:1px solid #CCC}

.divcon div{float:left}

.icon{width:20pxheight:20pxborder:1px solid #666text-align:centerline-height:20pxcursor:pointer}

.content{width:270pxpadding-left:5px}

.content p{color:#999display:none}

</style>

<div class="divcon">

<div class="icon">+</div>

    <div class="content">

     这里是文字哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦……

     <p>隐藏的文字隐藏的文字隐藏的文字隐藏的文字隐藏的文字隐藏的文字</p>

    </div>

</div>

加号和减号其实是一个触发按钮事件,写一个加function点加号的时候获取输入框中的值+1,写一个减function点减号的时候获取输入框中的值-1。

附加代码如下,你试试

<input id="min" name="" type="button" value="-" />

<input id="text_box" name="goodnum" type="text" value="${item.value.quantity }" style="width:25px" />

<input id="add" name="" type="button" value="+" /></td>

<script>

$(function(){

var t = $("#text_box")

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

t.val(parseInt(t.val())+1)

setTotal()

})

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

t.val(parseInt(t.val())-1)

setTotal()

})

function setTotal(){

var tt = $("#text_box").val()

var pbinfoid=$("#pbinfoid").val()

if(tt<=0){

alert('输入的值错误!')

t.val(parseInt(t.val())+1)

}else{

window.location.href = "shopping!updateMyCart.action?pbinfoid="+pbinfoid+"&number="+tt

}

}

})

</script>

你是想最多只有一个展开的组对吧?

这样的话,当你触发你的点击事件展开对应分组的时候,先找到其它展开的分组,将其折叠,同时将其组名前边的减号变成加号,然后再展开你点击的分组。

<ul id="block">

    <li><span class="icon"></span><ul>......</ul></li>

    <li><span class="icon"></span><ul>......</ul></li>

    <li><span class="icon"></span><ul>......</ul></li>

    <li><span class="icon"></span><ul>......</ul></li>

</ul>

//为简化代码,使用jquery

//expand的是展开状态下的图标class

//fold的是展开状态下的图标class

<script>

    $('.icon').on('click', function(){

        var el = $(this)

        if(el.hasClass('expand')){

            el.removeClass('expand').addClass('fold')

            el.next().hide()//对应内容隐藏

        }else{

            $('#block > li > .expand').removeClass('expand').addClass('fold')

            el.removeClass('fold').addClass('expand')

            el.next().show()//显示对应内容

        }

    })

</script>

大致就是这个思路,细节可能需要对应需求调整。