最小化点击javascript

Question

我的网页右下方有一个通知块已修复。我用HTML和CSS设计了它。这是链接.. http://jsfiddle.net/wp5Lfjwq/

现在，如果用户点击＆＃39; X＆＃39;，我希望通知大小调整（例如，高度：50px和宽度：50px）并且仅显示＆＃39;一些标题＆＃39;并且不希望整个通知框消失。

通过在java脚本中使用切换，我可以让它消失，但我该如何调整它呢？

这是HTML：

<div class="notification">
  <span class="notificationtitle">
    <strong>Some Title</strong>
    <span style="float: right">X</span>
  </span>
</div>

这是CSS：

.notification {
  border-image: none;
  border-style: solid solid none;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-width: 2px 2px medium;
  padding: 10px;
  position: fixed;
  background-color: #ffffff;
  border-color: #666;
  right: 10px;
  bottom: 0;
  z-index: 1;
  margin: 0 auto;
  width: 300px;
  float: left;
  height: 190px;
  text-align: center;
}


.notificationtitle {
  display: block;
  font-size: 22px;
  font-weight: normal;
  line-height: 26px;
  font: "HelveticaNeueLTStd65Medium";
  color: #4d4d4d;
}

任何帮助将不胜感激......

Answer 1

使用animate()

$('.notificationtitle').on('click',function(){
    $('.notification').animate({width:'50px',height:'46px'});
})

Updated Demo

Answer 2

试试这个：

$('.notificationtitle span').click(function(){
    $(this).closest('.notification').css({width:'50px',height:'50px'});
});

<强> DEMO

Answer 3

演示 - http://jsfiddle.net/wp5Lfjwq/11/

使用class和width

切换height

$('.notificationtitle').on('click', function () {
    $('.notification').toggleClass('hide');
})

.notification {
    border-image: none;
    border-style: solid solid none;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-width: 2px 2px medium;
    padding: 10px;
    position: fixed;
    background-color: #ffffff;
    border-color: #666;
    right: 10px;
    bottom: 0;
    z-index: 1;
    margin: 0 auto;
    width: 300px;
    float: left;
    height: 190px;
    text-align: center;
    transition: all .5s linear;
}
.notificationtitle {
    display: block;
    font-size: 22px;
    font-weight: normal;
    line-height: 26px;
    font:"HelveticaNeueLTStd65Medium";
    color: #4d4d4d;
}
.hide {
    width:50px;
    height:50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="notification"> <span class="notificationtitle"><strong>Some Title</strong><span style="float: right">X</span></span>
</div>

Answer 4

你的回答是......

＆＃13;

＆＃13;

$(document).ready(function() {
        $(".show span").click(function() {
			$(".show").css( 'display' , 'none' );
			$(".hide").css( 'display' , 'block' );
		});
		$(".hide strong").click(function() {
			$(".hide").css( 'display' , 'none' );
			$(".show").css( 'display' , 'block' );
		});
    });

＆＃13;

.notification {
	border-image: none;
    border-style: solid solid none;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-width: 2px 2px medium;
    padding: 10px;
	position: fixed;
	background-color: #ffffff;
	border-color: #666;
	right: 10px;
	bottom: 0;
	z-index: 1;
	margin: 0 auto;
	width: 300px;
	float: left;
	height: 190px;
	text-align: center;
}
.show{
	display:block;
}
.hide{
	display:none;
	width:150px;
	height:30px;
	cursor:pointer;
}

.notificationtitle {
	display: block;
	font-size: 22px;
	font-weight: normal;
	line-height: 26px;
	font: "HelveticaNeueLTStd65Medium";
	color: #4d4d4d;
}
.notificationtitle span{
	float:right;
	cursor:pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="notification show">
        <span class="notificationtitle"><strong>Some Title</strong><span>X</span></span>
</div>
<div class="notification hide">
  <span class="notificationtitle"><strong>Some Title</strong></span>
</div>

＆＃13;

＆＃13;

＆＃13;