二级回复点击显隐效果

This commit is contained in:
Tim 2016-09-06 17:09:57 +08:00
parent 96e7d14060
commit bd7cd7e244
8 changed files with 28 additions and 30 deletions

View File

@ -73,11 +73,11 @@
<div ng-if="journal.praise_count && !journal.has_praise" ng-click="addPraise(journal);"><img src="/images/wechat/w_praise.png" width="20" style="vertical-align:top; margin-top:2px;" class="mr5" /><span>{{journal.praise_count}}</span></div>
<div ng-if="journal.has_praise" ng-click="decreasePraise(journal);"><img src="/images/wechat/w_praised.png" width="20" style="vertical-align:top; margin-top:2px;" class="mr5" /><span>{{journal.praise_count}}</span></div>
</div>
<div class="fr mr25 f13 reply-icons" multi-reply>
<div class="fr mr25 f13 reply-icons multi-hide" multi-reply>
<a><img src="/images/wechat/w_reply.png" width="20" style="vertical-align:top; margin-top:2px;" class="mr5" /><span style="vertical-align:top;">回复</span></a>
</div>
<div class="cl"></div>
<div class="post-input-container ml40 mb10 undis">
<div class="post-input-container multi-input-container ml40 mb10 undis">
<div class="copy-input-container"><textarea class="copy-input"></textarea></div>
<textarea input-auto type="text" class="post-reply-input" ng-model="formData.comment" placeholder="{{replytip}}" /></textarea>
<button ng-click="addReply(formData)" ng-disabled="formData.disabled" ng-hide="formData.disabled" class="post-reply-submit fr border-radius">提交</button>

View File

@ -71,11 +71,11 @@
<div ng-if="journal.praise_count && !journal.has_praise" ng-click="addPraise(journal);"><img src="/images/wechat/w_praise.png" width="20" style="vertical-align:top; margin-top:2px;" class="mr5" /><span>{{journal.praise_count}}</span></div>
<div ng-if="journal.has_praise" ng-click="decreasePraise(journal);"><img src="/images/wechat/w_praised.png" width="20" style="vertical-align:top; margin-top:2px;" class="mr5" /><span>{{journal.praise_count}}</span></div>
</div>
<div class="fr mr25 f13 reply-icons" multi-reply>
<div class="fr mr25 f13 reply-icons multi-hide" multi-reply>
<a><img src="/images/wechat/w_reply.png" width="20" style="vertical-align:top; margin-top:2px;" class="mr5" /><span style="vertical-align:top;">回复</span></a>
</div>
<div class="cl"></div>
<div class="post-input-container ml40 mb10 undis">
<div class="post-input-container multi-input-container ml40 mb10 undis">
<div class="copy-input-container"><textarea class="copy-input"></textarea></div>
<textarea input-auto type="text" class="post-reply-input" ng-model="formData.comment" placeholder="{{replytip}}" /></textarea>
<button ng-click="addReply(formData)" ng-disabled="formData.disabled" ng-hide="formData.disabled" class="post-reply-submit fr border-radius">提交</button>

View File

@ -86,11 +86,11 @@
<div ng-if="journal.praise_count && !journal.has_praise" ng-click="addPraise(journal);"><img src="/images/wechat/w_praise.png" width="20" style="vertical-align:top; margin-top:2px;" class="mr5" /><span>{{journal.praise_count}}</span></div>
<div ng-if="journal.has_praise" ng-click="decreasePraise(journal);"><img src="/images/wechat/w_praised.png" width="20" style="vertical-align:top; margin-top:2px;" class="mr5" /><span>{{journal.praise_count}}</span></div>
</div>
<div class="fr mr25 f13 reply-icons" multi-reply>
<div class="fr mr25 f13 reply-icons multi-hide" multi-reply>
<a><img src="/images/wechat/w_reply.png" width="20" style="vertical-align:top; margin-top:2px;" class="mr5" /><span style="vertical-align:top;">回复</span></a>
</div>
<div class="cl"></div>
<div class="post-input-container ml40 mb10 undis">
<div class="post-input-container multi-input-container ml40 mb10 undis">
<div class="copy-input-container"><textarea class="copy-input"></textarea></div>
<textarea input-auto type="text" class="post-reply-input" ng-model="formData.comment" placeholder="{{replytip}}" /></textarea>
<button ng-click="addReply(formData)" ng-disabled="formData.disabled" ng-hide="formData.disabled" class="post-reply-submit fr border-radius">提交</button>

View File

@ -75,11 +75,11 @@
<div ng-if="journal.praise_count && !journal.has_praise" ng-click="addPraise(journal);"><img src="/images/wechat/w_praise.png" width="20" style="vertical-align:top; margin-top:2px;" class="mr5" /><span>{{journal.praise_count}}</span></div>
<div ng-if="journal.has_praise" ng-click="decreasePraise(journal);"><img src="/images/wechat/w_praised.png" width="20" style="vertical-align:top; margin-top:2px;" class="mr5" /><span>{{journal.praise_count}}</span></div>
</div>
<div class="fr mr25 f13 reply-icons" multi-reply>
<div class="fr mr25 f13 reply-icons multi-hide" multi-reply>
<a><img src="/images/wechat/w_reply.png" width="20" style="vertical-align:top; margin-top:2px;" class="mr5" /><span style="vertical-align:top;">回复</span></a>
</div>
<div class="cl"></div>
<div class="post-input-container ml40 mb10 undis">
<div class="post-input-container multi-input-container ml40 mb10 undis">
<div class="copy-input-container"><textarea class="copy-input"></textarea></div>
<textarea input-auto type="text" class="post-reply-input" ng-model="formData.comment" placeholder="{{replytip}}" /></textarea>
<button ng-click="addReply(formData)" ng-disabled="formData.disabled" ng-hide="formData.disabled" class="post-reply-submit fr border-radius">提交</button>

View File

@ -92,11 +92,11 @@
<div ng-if="journal.praise_count && !journal.has_praise" ng-click="addPraise(journal);"><img src="/images/wechat/w_praise.png" width="20" style="vertical-align:top; margin-top:2px;" class="mr5" /><span>{{journal.praise_count}}</span></div>
<div ng-if="journal.has_praise" ng-click="decreasePraise(journal);"><img src="/images/wechat/w_praised.png" width="20" style="vertical-align:top; margin-top:2px;" class="mr5" /><span>{{journal.praise_count}}</span></div>
</div>
<div class="fr mr25 f13 reply-icons" multi-reply>
<div class="fr mr25 f13 reply-icons multi-hide" multi-reply>
<a><img src="/images/wechat/w_reply.png" width="20" style="vertical-align:top; margin-top:2px;" class="mr5" /><span style="vertical-align:top;">回复</span></a>
</div>
<div class="cl"></div>
<div class="post-input-container ml40 mb10 undis">
<div class="post-input-container multi-input-container ml40 mb10 undis">
<div class="copy-input-container"><textarea class="copy-input"></textarea></div>
<textarea input-auto type="text" class="post-reply-input" ng-model="formData.comment" placeholder="{{replytip}}" /></textarea>
<button ng-click="addReply(formData)" ng-disabled="formData.disabled" ng-hide="formData.disabled" class="post-reply-submit fr border-radius">提交</button>

View File

@ -70,11 +70,11 @@
<div ng-if="journal.praise_count && !journal.has_praise" ng-click="addPraise(journal);"><img src="/images/wechat/w_praise.png" width="20" style="vertical-align:top; margin-top:2px;" class="mr5" /><span>{{journal.praise_count}}</span></div>
<div ng-if="journal.has_praise" ng-click="decreasePraise(journal);"><img src="/images/wechat/w_praised.png" width="20" style="vertical-align:top; margin-top:2px;" class="mr5" /><span>{{journal.praise_count}}</span></div>
</div>
<div class="fr mr25 f13 reply-icons" multi-reply>
<div class="fr mr25 f13 reply-icons multi-hide" multi-reply>
<a><img src="/images/wechat/w_reply.png" width="20" style="vertical-align:top; margin-top:2px;" class="mr5" /><span style="vertical-align:top;">回复</span></a>
</div>
<div class="cl"></div>
<div class="post-input-container ml40 mb10 undis">
<div class="post-input-container multi-input-container ml40 mb10 undis">
<div class="copy-input-container"><textarea class="copy-input"></textarea></div>
<textarea input-auto type="text" class="post-reply-input" ng-model="formData.comment" placeholder="{{replytip}}" /></textarea>
<button ng-click="addReply(formData)" ng-disabled="formData.disabled" ng-hide="formData.disabled" class="post-reply-submit fr border-radius">提交</button>

View File

@ -71,11 +71,11 @@
<div ng-if="journal.praise_count && !journal.has_praise" ng-click="addPraise(journal);"><img src="/images/wechat/w_praise.png" width="20" style="vertical-align:top; margin-top:2px;" class="mr5" /><span>{{journal.praise_count}}</span></div>
<div ng-if="journal.has_praise" ng-click="decreasePraise(journal);"><img src="/images/wechat/w_praised.png" width="20" style="vertical-align:top; margin-top:2px;" class="mr5" /><span>{{journal.praise_count}}</span></div>
</div>
<div class="fr mr25 f13 reply-icons" multi-reply>
<div class="fr mr25 f13 reply-icons multi-hide" multi-reply>
<a><img src="/images/wechat/w_reply.png" width="20" style="vertical-align:top; margin-top:2px;" class="mr5" /><span style="vertical-align:top;">回复</span></a>
</div>
<div class="cl"></div>
<div class="post-input-container ml40 mb10 undis">
<div class="post-input-container multi-input-container ml40 mb10 undis">
<div class="copy-input-container"><textarea class="copy-input"></textarea></div>
<textarea input-auto type="text" class="post-reply-input" ng-model="formData.comment" placeholder="{{replytip}}" /></textarea>
<button ng-click="addReply(formData)" ng-disabled="formData.disabled" ng-hide="formData.disabled" class="post-reply-submit fr border-radius">提交</button>

View File

@ -7,24 +7,22 @@ app.directive('multiReply',["$timeout",function(timer){
scope: {},
link: function(scope, element){
timer(function(){
$(".reply-icons").each(function(){
$(this).toggle(function(){
var multiInput = $(this).next().next();
multiInput.show();
multiInput.focus();
$(".reply-icons").live("click",function(){
if($(this).hasClass("multi-hide")){
$(".multi-input-container").addClass("undis");
$(".reply-icons").addClass("multi-hide");
$(this).next().next().removeClass("undis");
$(this).next().next().focus();
$(this).removeClass("multi-hide");
$(".post-reply-input").val("");
$(multiInput).bind("focus",function(){
$("#post_input_1").hide();
});
},function(){
var multiInput = $(this).next().next();
$(this).next().next().hide();
$(this).next().next().blur();
}
else{
$(this).addClass("multi-hide");
$(".post-input-container").addClass("undis");
$(".post-reply-input").val("");
$(multiInput).bind("blur",function(){
$("#post_input_1").show();
});
});
$("#post_input_1, #post_input_1 .post-input-container").show();
}
});
})
}