当我单击测试1，测试2或测试3时，单击的div将突出显示其他两个div。我想要做的是，当div得到高亮显示时，页面的其他区域必须是暗的（不透明度降低）然后单击div仅从整页突出显示。 任何人帮我完成这件事......
这里的工作示例
$(function() {
$('.section').click(function() {
$('.section2').removeClass('section2');
$(this).addClass('section2');
});
});.container {
width: 400px;
margin: 0 auto;
}
.section {
height: 50px;
margin: 10px;
background-color: red;
color: white;
box-shadow: 3px 3px 15px rgba(102, 102, 102, 0);
border: 1px solid rgba(0, 0, 0, 0);
opacity: .3;
}
.section2 {
height: 50px;
background-color: green;
color: white;
margin: 10px;
opacity: 1 !important;
box-shadow: 3px 3px 15px #666;
border: 1px solid #7d7d7d;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<header>This is header of the sample </header>
<br/>
<div class="div-list">
<div class="section">
<h2>Test 1</h2>
</div>
<div class="section">
<h2>Test 2</h2>
</div>
<div class="section">
<h2>Test 3</h2>
</div>
</div>
<br/>
<footer>
<h3>This is footer of the sample </h3>
</footer>
</div>
答案 0 :(得分：0)
当您点击其中一个元素时，您只需在整个容器或页面上设置黑色背景，并使用正确的不透明度。
imports:
- { resource: parameters.yml }
- { resource: security.yml }
- { resource: services.yml }
- { resource: "@AdminBundle/Resources/config/services.yml" }
- { resource: "@UserBundle/Resources/config/services.yml" }
# Put parameters here that don't need to change on each machine where the app is deployed
# http://symfony.com/doc/current/best_practices/configuration.html#application-related-configuration
parameters:
locale: en
framework:
#esi: ~
translator: { fallbacks: ["%locale%"] }
secret: "%secret%"
router:
resource: "%kernel.root_dir%/config/routing.yml"
strict_requirements: ~
form: ~
csrf_protection: ~
validation: { enabled: true, enable_annotations: true }
#serializer: { enable_annotations: true }
templating:
engines: ['twig']
default_locale: "%locale%"
trusted_hosts: ~
trusted_proxies: ~
session:
# http://symfony.com/doc/current/reference/configuration/framework.html#handler-id
handler_id: session.handler.native_file
save_path: "%kernel.root_dir%/../var/sessions/%kernel.environment%"
fragments: ~
http_method_override: true
assets: ~
# Twig Configuration
twig:
debug: "%kernel.debug%"
strict_variables: "%kernel.debug%"
# Doctrine Configuration
doctrine:
dbal:
driver: pdo_mysql
host: "%database_host%"
port: "%database_port%"
dbname: "%database_name%"
user: "%database_user%"
password: "%database_password%"
charset: UTF8
# if using pdo_sqlite as your database driver:
# 1. add the path in parameters.yml
# e.g. database_path: "%kernel.root_dir%/data/data.db3"
# 2. Uncomment database_path in parameters.yml.dist
# 3. Uncomment next line:
# path: "%database_path%"
orm:
auto_generate_proxy_classes: "%kernel.debug%"
naming_strategy: doctrine.orm.naming_strategy.underscore
auto_mapping: true
# Swiftmailer Configuration
swiftmailer:
transport: "%mailer_transport%"
host: "%mailer_host%"
username: "%mailer_user%"
password: "%mailer_password%"
spool: { type: memory }
# FOSUserBundle
fos_user:
db_driver: orm
firewall_name: main
use_listener: false
user_class: UserBundle\Entity\User
# SonataAdminBundle
更新了 JsFiddle：https://jsfiddle.net/g1jqyk8x/5/
更新如果您希望突出显示消失，您必须编写一个功能，检查您是否点击了您的项目之外的身体。
$(function() {
$('.section').click(function() {
$('.section2').removeClass('section2');
$(this).addClass('section2');
$(".container").css({"background-color": "rgba(0,0,0,0.7)"});
});
});
JsFiddle：https://jsfiddle.net/g1jqyk8x/6/
答案 1 :(得分：0)
操纵html标签的不透明度和Z索引以及您突出显示的所述元素的z-index（更高）。
这是我编辑的唯一代码与你的相比：
$(function() {
$('.section').click(function() {
$('.section2').removeClass('section2');
$(this).addClass('section2');
$("html").css({"z-index" : "200", "opacity": "0.7","background": "black"});
});
});
.section2 {
height: 50px;
background-color: green;
color: white;
margin:10px;
opacity: 1 !important;
box-shadow: 3px 3px 15px #666;
border: 1px solid #7d7d7d;
z-index: 201;
}
答案 2 :(得分：0)
我已更新了您的fiddle。请检查一下。
您需要添加的条件是检查＆＃39; .section＆＃39;如果有一个班级＆＃39; .section2＆＃39;。
$(function() {
$('.section').click(function() {
$('.section2').removeClass('section2');
$(this).addClass('section2');
if ( $('.section').hasClass('section2') ) {
$('body').addClass('darkBg');
$('.section2').removeClass('section2');
$(this).addClass('section2');
console.log('aaa');
} else {
$('body').removeClass('darkBg');
}
});
});
答案 3 :(得分：0)
如果您只想降低其他项目的不透明度，您可以选择所有这些项目，但没有.section2类，而是添加.darken类。
$(function() {
$( '.section' ).click(function() {
$( '.section2' ).removeClass( 'section2 darken' );
$( this ).addClass( 'section2' );
$( '.section:not( .section2 )' ).addClass( 'darken' );
});
});.container {
width: 400px;
margin: 0 auto;
}
.section {
height: 50px;
margin: 10px;
background-color: red;
color: white;
box-shadow: 3px 3px 15px rgba(102, 102, 102, 0);
border: 1px solid rgba(0, 0, 0, 0);
opacity: .3;
transition: opacity .5s, background-color .25s;
}
.section2 {
height: 50px;
background-color: green;
color: white;
margin: 10px;
opacity: 1 !important;
box-shadow: 3px 3px 15px #666;
border: 1px solid #7d7d7d;
}
.darken {
opacity: 0.1;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<header>This is header of the sample </header>
<br/>
<div class="div-list">
<div class="section">
<h2>Test 1</h2>
</div>
<div class="section">
<h2>Test 2</h2>
</div>
<div class="section">
<h2>Test 3</h2>
</div>
</div>
<br/>
<footer>
<h3>This is footer of the sample </h3>
</footer>
</div>